[팁] javascript console 객체 알아보기

console.log(obj)를 사용하지 말고 console.log(JSON.parse(JSON.stringify(obj)))

자바스크립트를 이용해서 개발해 오면서 변수의 값을 확인하거나 디버그 용도로 항상 console.log 메소드를 사용해 왔다.

그러던 중 우연히 console에 다른 메소드는 없을까 궁금증이 생겼고, 구글에 javascript console에 대해 검색하니 console에는 다양한 메소드가 있는 것 같았다.

그것도 당연한 것이, console 역시 기정의된 객체이므로 그 안에 log 말고도 다양한 메소드나 속성이 있을 것이다.

다만 항상 당연하게 log만 사용해서 다른 옵션에 대해 생각해 보지 못한 것이다.

https://developer.mozilla.org/ko/docs/Web/API/console

console - Web API | MDN

이 document를 참조하면서 실제로 많이 사용될 만한 메소드를 정리해 보았다.

텍스트 출력하기

우리가 익히 사용했던 console.log는 사실 중요도에 따라 console.log, console.info, console.warn, console.error 로 구분된다.

또한, 객체를 출력할 때에는 console.log(JSON.parse(JSON.stringify(obj)))를 사용하는 것을 권장한다. 

객체의 현재 상태가 아닌, 출력했을 때의 상태를 보고 싶지만 브라우저는 끊임없이 객체 값을 업데이트해서 보여주기 때문에 위 방법을 사용하면 유용할 것 같다.

 

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

새로 알았던 사실인데, console.log에서도 서식 문자를 지원한다고 한다. 

 

`string text ${expression} string text`

하지만 다음과 같이 template literal을 이용해서 표현하는 방법이 훨씬 편한 것 같다.

 

콘솔 그룹 사용하기

콘솔 그룹을 사용하면 비슷한 속성을 가지는 텍스트끼리 묶어서 표현할 수 있다.

console.group으로 bracket을 하나 연 것과 같은 효과를 얻을 수 있고, console.groupEnd로 하나의 bracket을 닫을 수 있다.

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

예를 들어 위와 같은 예제는 다음과 같이 표현된다.

 

내용을 그룹핑해서 구조적으로 볼 필요가 있을 때에는 유용할 것 같지만 임시적인 디버깅보다는 계속 남아있어야 하는(지속적으로 사용되는) 로그 텍스트에 적당한 것 같다.

 

타이머 출력하기

이전까지는 어떤 함수를 실행하는데 걸리는 시간을 측정하려면 시작할 때 date 객체를 저장해놓고, 끝날 때 date 객체를 저장해서 그 둘을 비교하는 방식으로 진행했다.

물론 그런 방식도 잘 동작하겠지만, 변수 선언 없이 console 객체의 내장 타이머만을 이용해서 출력할 수 있는 방법이 있다.

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

console.time 안에 timer 이름을 넣어주고, console.timeLog를 이용한다면 timer를 시작한 시점부터의 ms를 측정한다.

console.timeEnd를 실행하면 해당 timer가 종료되게 된다.

실행 결과는 다음과 같다.

다음부터는 퍼포먼스 체크할 때에 사용해 보도록 해야겠다.

 

스택 추적

console.trace를 이용한다면 다음과 같이 해당 문장을 실행하기까지의 스택을 출력해준다.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

 

console 객체를 정리해 보면서 익숙하게 생각했던 console에 이렇게 많은 메소드들이 있었음을 알게 되었고, 역시 프로그래밍 공부에는 끝이 없다는 것을 다시 한 번 깨닫게 되었다.