지금까지 저는 Javascript로 짜여진 코드를 디버깅할때 단순히 console.log 정도만 활용했었는데요.

알아보니 console 객체가 제공하는 유용한 메소드들이 꽤 다양합니다.

어떤 메소드들이 있고 디버깅시에 활용할만한 팁들은 무엇인지 알아보겠습니다.

제공되는 메소드 리스트

console 객체의 메소드 리스트

javascript console 객체의 메소드들은 console.log(console)을 해보면 위와같이 제공되는데요.

일단은 크롬을 기준으로 설명해드리겠습니다.
( 주의: 다른 브라우저에는 조금 다르게 구현되거나 제공되지 않는 메소드들이 존재할 수 있습니다. )

console.assert()

const errorMsg = 'the # is not even';
for (let number = 2; number <= 5; number += 1) {
    console.log('the # is ' + number);
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
    // or, using ES2015 object property shorthand:
    // console.assert(number % 2 === 0, {number, errorMsg});
}

예제의 코드를 실행하면 숫자가 짝수가 아닐경우 console에 assert 체크가 실패하였음이 출력됩니다.

console assert

assert는 특정 로직에서 올바르지 않는(예상 외의) 조건이 처리되는 경우를 방지하거나 체크하기 위해 사용하면 좋을 것 같습니다.
( 함수의 파라미터가 잘못 전달된다던지, 필수값이 null 이라던지 등등.. )

console.count()

count 메소드는 이름에서도 알 수 있듯이 count가 호출될때마다 몇번 호출되었는지 카운팅을 해서 보여줍니다.

function callName(name) {
    //console.count()
    console.count(name)
}
callName('ios');
callName('android');
callName('linux');
callName('android');
callName('window');
console count

실행 결과에서 보듯이 count() 실행시 전달된 파라미터별로 호출된 횟수를 보여줍니다.
( 파라미터를 전달하지 않으면 카운트 메소드가 호출된 전체 횟수를 보여줍니다. )

count() 메소드는 특정 함수나 로직이 얼마나 호출되었는지 또는 특정 파라미터나 결과 값의 빈도가 얼마나 되는지 등을 측정할 때 사용하면 좋을 것 같습니다.

추가로 console.countReset() 으로 누적된 카운트를 초기화 할 수 있습니다.
( count() 메소드와 마찬가지로 파라미터에 따라 누적카운트를 초기화하는 대상이 달라지겠죠? ㅎㅎ)

cossole.debug()

debug() 메소드는 기능적으로는 console.log() 와 동일하지만
로그레벨이 debug로 설정 되어있는 경우에만 로그를 확인 할 수 있다는 점이 다릅니다.

다만 현재 대부분의 브라우저에서는 로그레벨을 설정하는 기능이 없고,
일부 브라우저에서만 해당 메소드가 작동이 되는것으로 확인되니 아직 사용하기에는 이른시점인것 같습니다 😅

console.error()

error() 메소드는 기능적으로는 console.log()와 동일하지만
로그레벨이 error로 설정되어있는 경우에만 확인 할 수 있습니다.

현재 크롬에서는 정상적으로 로그레벨을 error로 설정할 수 있는 관계로 일반 디버깅 로그인지 에러 로그인지를 구분하고 필터해서 보는 용도로 유용하게 사용할 수 있습니다.

console count – 1
console count – 2

console.group(), console.groupEnd()

console.log("그룹 없는 로그");
console.group("첫번째 그룹");
console.log("첫번째 그룹의 로그");
console.group("두번째 그룹");
console.log("두번째 그룹의 로그");
console.groupEnd();
console.log("첫번째 그룹의 로그2");
console.groupEnd();
console.log("그룹없는 로그");
console group

group(), groupEnd() 메소드는 로그 결과를 그룹핑할 수 있는 기능입니다.

이름 그대로 group() 메소드가 호출된 시점부터 출력되는 로그들을 하나의 그룹으로 묶어서 표시해주며,
groupEnd() 메소드가 호출된 시점에서 현재의 그룹 설정이 종료되고 이후의 로그를 상위그룹으로 표시해줍니다.

이 메소드는 함수가 여러단계로 호출되는 경우 함수의 호출 단계별로 로그를 출력하던지, 클래스단위로 그룹을 설정해서 출력한다던지 등의 방법으로 활용할 수 있습니다.

console.info()

info() 메소드는 기능적으로는 console.log()와 동일하지만
로그레벨이 info로 설정되어있는 경우에만 확인 할 수 있습니다.

console.profile(), console.profileEnd()

⚠️ 이 기능은 공식적인 표준에 해당하는 기능이 아니므로 호환/작동되지 않는 브라우저가 존재할 수 있으니 주의가 필요합니다.

profile() 메소드가 호출된 시점부터 profileEnd() 메소드가 호출될때까지의 javascript 작동에 따른 리소스를 프로파일링하여 보여줍니다.

현재 크롬에서는 cpu 의 사용량정도만 체크해주는듯합니다.

크롬 콘솔에서는 기본적으로 javascript profiler가 활성화되어있지 않으므로 메뉴에서 javascript profiler를 활성해 주셔야 프로파일링 결과를 확인할 수 있습니다.

console profile

어느 로직에서 리소스를 많이 사용하는지 등을 체크하는 용도로 사용할 수 있겠습니다.

console.table()

데이터를 테이블화하여 출력해주는 메소드입니다.

일반적인 key,value 형식의 값은 console.log보다 table 형태로 보여지므로 한눈에 데이터를 파악하기 좋습니다.

console.table(['사과', '수박', '참외']);
console.table([['사과', '수박', '참외'], ["자두","옥수수","멜론"]]);
console.table([
    {name: "apple", value:"iphone"},
    {name: "samsung", value:"galaxy"},
    {name: "google", value:"pixel"}
]);
console table

console.time(), console.timeEnd(), console.timeLog()

console.time('execute time: for loop');
for (var i=0; i<1000000; i++) {
    if (i === 100000) {console.timeLog('execute time: for loop');}
}
console.timeEnd('execute time: for loop');

시간 측정 메소드입니다.

time() 메소드 호출시점부터 timeEnd() 메소드의 호출시점까지의 시간을 기록합니다. (ms 단위)

시간 기록 도중 timeLog() 메소드를 호출하면 호출한 시점을 시간을 표시해줍니다.

console time

로직의 실행시간을 측정하여 퍼포먼스를 개선하는 용도로 활용할 수 있습니다.

console.trace()

함수 호출 기록을 표시하는 메소드입니다.

trace() 메소드가 호출된 시점 이전에 어떤 함수들이 호출되어 현재 함수가 호출되었는지 파악 할 수 있습니다.

오류시 함수간의 호출관계를 파악하는데 유용하게 활용할 수 있습니다.

function func1() {
    func2();
}
function func2() {
    console.trace();
}

func1();
console trace

cosole.warn()

warn() 메소드는 기능적으로는 console.log()와 동일하지만
로그레벨이 warn로 설정되어있는 경우에만 확인 할 수 있습니다.

여기까지 현재 지원되는 console 관련 메소드들을 살펴보았습니다.

저도 찾아보면서 몰라서 쓰지 못했던 유용한 기능들을 많이 알게되어 javascript 개발시에 많은 도움이 될 것 같습니다.

감사합니다. 😊