JavaScript console 활용하기 ( console.log 및 여러기능 )

개발 및 디버깅 단계에서 정말 많이 사용하는 것이 바로 콘솔 로그입니다.

콘솔 로그를 활용하는 방법들에 대해 살펴보겠습니다.

 

1. console.log ( 출력하기 )

 

기본적인 출력 기능입니다.

많은 분들이 console.log()는 잘 알고 계시고 사용하고 계시지만

그 외에도 등급별로 다른 출력 기능이 있습니다.

사용해보시면 구문 별로 색상이 다르게 출력됩니다.

// log level
console.log('log')   // 출력
console.info('info') // 정보
console.warn('warn') // 경보
console.error('error')) // 에러

 

2. console.assert ( 조건이 참일 때만 출력하기 )

 

내가 원하는 특정 조건이 맞을 때만 출력하는 방법입니다.

console.assert(1 === 1, '1===1 same');
console.assert(1 === 2, '1===2 same');

1 === 1이 참인 조건이기에 첫 번째 문만 출력됩니다.

 

3. console.table , console.dir ( Object 출력하기 )

 

Object를 출력할 때는 기본적으로 console.log로 사용도 하지만

한눈에 보기 쉽게 출력할 때는 console.table을 사용하면

Object 가 테이블 형태로 출력되어 훨씬 보기 쉽습니다.

 

또 console.dir 이 있는데요~

console.log 와 동일하지만 여러 가지 옵션을 설정할 수 있습니다.

대표적으로 아래 문처럼 depth 를지정하면 오브젝트 하위 오브젝트를

depth에 해당하는 만큼 함께 출력 가능합니다.

console.log(obj)
console.table(obj)
console.dir(obj, {colors: false, depth: 1});

 

4. console.time ( 시간 측정하기 )

 

console 에는 시간을 측정하는 기능도 있습니다.

console.time 과 console.timeEnd인데요

아래와 같이 사용합니다.

console.time('time1');
console.time('time2');
for (let i = 0; i < 10; i++) {
	
}
console.timeEnd('time1'); // console.time('time1') 이 선언된 시간부터 지금까지 걸린시간을 출력
 
for (let j = 0; j < 100; j++) {
 
}
console.timeEnd('time2'); // console.time('time2') 이 선언된 시간부터 지금까지 걸린시간을 출력

 

 

5. console.count ( 카운팅 하기 )

 

console에서는 카운팅 기능도 제공하고 있습니다.

console.count로 카운팅을 할 수 있고 console.countReset으로 초기화합니다.

아래 예제를 살펴보겠습니다.

 

function count() {
	console.count('how many times function count is called?');
}
count();	// how many times function count is called? : 1
count();	// how many times function count is called? : 2
count();	// how many times function count is called? : 3
 
console.countReset('how many times function count is called?'); // 카운트 초기화기능
 
count();	// how many times function count is called? : 1
count();	// how many times function count is called? : 2

 

6. console.trace ( 호출 경로 파악하기 )

 

console.trace 를통해 호출 경로를 출력할 수 있습니다.

 

function func1() {
	func2();
}
function func2() {
	func3();
}
function func3() {
	console.trace();
}
func1();
 
/*
    at func3 (/User/temp.js:32:11)
    at func2 (/User/temp.js:29:3)
    at func1 (/User/temp.js:26:3)
    at Object......
*/

 

위 코드를 실행하면 func3, 2, 1 순서대로 호출된 곳을 출력해줍니다.

알아두시면 디버깅 시 굉장히 유용하게 사용할 수 있을 것 같습니다.