자바스크립트를 개발할 때 정말 많이 사용하는 기능 중 하나가 console.log입니다. 이 console 객체는 브라우저의 디버깅을 위해서, 혹은 동작 중간에 response를 확인하고 싶을 때 등 등 익숙하게 사용하는 객체입니다. 하지만 대부분의 개발자들이 console.log만 사용할 뿐, console 객체의 다른 메서드들에 대해서는 잘 모릅니다. 이 글에서는 대표적으로 많이 사용하는 또 다른 메서드들을 소개하고자 합니다.
* 이 글은 크롬 브라우저를 기반으로 작성되며, 기타 브라우저에서 동일하게 동작하지 않을 수 있습니다. 모질라 파이어폭스에서 제공하는 Browser compatibility에서 console 객체에 대한 호환성을 확인하실 수 있습니다.
(1) 로깅
개발자 도구에서 로그를 출력할 때 어떤 메서드를 사용하느냐에 따라 좀 더 보기 좋게 만들 수 있습니다. 일반적인 로깅 레벨과 동일한 메서드명을 사용합니다.
console.log('로그 메세지');
console.debug('디버그 메세지');
console.info('정보 메세지');
console.warn('경고 메세지');
console.error('에러 메세지');그러면 아래와 같이 조금 다르게 결과가 출력되는 것을 볼 수 있습니다.
(만약 디버그 메시지가 출력되지 않는다면, 개발자 도구 상단의 로그 레벨(Default Levels => Verbose - All Levels)을 바꿔 주시면 됩니다.
크롬은 로그와 디버그 정보 메시지가 모두 동일한 형태로 표시되지만, 브라우저에 따라서 스타일이 다릅니다.
+추가 정보
- 서식문자를 활용한 치환
로그를 찍을 때, %d나 %s를 사용하여 + 기호를 통한 문자열 연결 없이도 출력이 가능합니다. (%d : 숫자, %s : 문자, %o : 객체)
var numVar = 1;
var strVar = 'hello';
console.log('%d is number, %s is string', numVar, strVar);
- 객체 사용시 실시간 참조 변화
아래와 같은 객체가 있다고 가정하고 console에 출력해보겠습니다.
var obj = {};
console.log(obj);
obj.fieldVar = 1;
console.log(obj);코드만 봤을 때는, 빈 객체가 출력되고, 그다음 로그에서는 fieldVar가 들어간 객체가 출력될 것이라고 생각됩니다. 그러나 결과는 아래와 같습니다.
객체를 로깅할 때에는 객체의 내용이 변경되면 실시간으로 업데이트됩니다. 객체가 레퍼런스로 참조되기 때문인데, 이를 피하기 위해서는 객체를 깊은 복사 하여 로깅하거나 객체 자체를 로깅하지 않도록 주의해야 합니다. (깊은 복사의 경우 비용이 크기 때문에 권장하지 않습니다.)
- 스타일 변경
%c와 css style을 이용하여 콘솔에 출력되는 로그의 스타일을 바꿀 수도 있습니다.
console.log('%cColor Change!!', 'color: navy; font-size: 30px');
첫 인자는 출력하고자 하는 문자열, 그리고 그 이후로 들어가는 인자들은 %c의 개수와 동일하게 들어갈 수 있으며 각자 다른 스타일을 지정할 수 있습니다.
(2) assert
특정한 경우에만 로그가 찍히게 하고 싶을때, if-else를 이용하는 것이 아니라 assert 메서드를 사용하면 손쉽게 처리할 수 있습니다.
console.assert(true, 'log not print');
console.assert(false, 'log print');
첫 번째 인자가 false인 경우에만 로그가 출력됩니다.
(3) 성능 측정
개발한 코드의 성능을 측정하기 위해서, 해당하는 코드 지점 간 시간을 측정하는 방법을 많이 사용합니다. 일반적으로는 아래와 같이 측정할 수 있습니다.
[Date를 통한 성능 측정]
var start = Date.now();
for(var i=0; i<1000000; i++){
// 코드 반복 실행
}
console.log((Date.now() - start));
아무런 코드도 실행하지 않고 단순 반복만 수행하여서 7 밀리세컨드가 소요되었습니다. 그러나 time 메서드를 사용하면 굳이 Date 객체를 사용하고 연산할 필요가 없습니다.
[time 메서드를 통한 성능 측정]
console.time('test work');
for(var i=0; i<1000000; i++){
// 코드 반복 실행
}
console.timeEnd('test work');
크게 차이나 보이지 않을 수도 있으나, Date를 이용할 때보다 코드가 짧고, 측정이 더 정확합니다. 또한 한 페이지 내에서 최대 1만 개의 다른 타이머를 동시에 추적할 수 있기 때문에 time 메서드를 사용하는 것이 더 좋습니다.
(4) dir
DOM element를 javascript 객체로 나타내기 위한 쉬운 방법으로 dir 메서드가 있습니다. 예를 들어 document.body를 console.log로 출력하게 되면 아래와 같이 HTML 형식으로 결과가 출력됩니다.
(참고. 구글 화면에서 출력된 body입니다.)
그러나 개발을 위해서 필요한 정보는 element의 속성이 대부분이지 HTML의 정보를 브라우저 콘솔에서 볼 일은 거의 없습니다. 이럴 때 dir 메서드를 사용하면 아래와 같이 출력됩니다.
해당 DOM의 element 속성이 무엇이 있는지, children에는 무엇이 있는지, 해당 객체의 메서드에는 무엇이 있는지 등 다양한 정보를 확인할 수 있습니다.
이외에도 group(메시지를 그룹화하여 보여줌), table(객체 정보를 표의 형태로 표시), count(호출 횟수 확인) 등 많은 메서드가 존재하며, chrome-devtools/console과 mozilla console에서 더 많은 내용들을 확인하실 수 있습니다.
댓글