브라우저 개발자도구 콘솔창 활용 팁

브라우저별 개발자 도구가 계속 발전하고 있어서 웹 개발과 디버깅 시간이 많이 단축되었다. 개발자 도구가 없을땐 어떻게 개발했는지 생각도 안날 만큼 친숙해져있다.

개발자 도구에 많은 기능이 있지만 콘솔 API만 조금 살펴보자.
JavaScript 테스트할때 console.log() 많이 사용할텐데 이번 기회에 알록달록 색상도 넣어보자.

개발자 도구 콘솔창 단축키

브라우저	Windows	Linux	Mac
크롬(Chrome)	`Ctrl` + `Shift` + `J`	`Ctrl` + `Shift` + `J`	`Cmd` + `Option` + `J`
파이어폭스(FireFox)	`Ctrl` + `Shift` + `K`	`Ctrl` + `Shift` + `K`	`Cmd` + `Option` + `K`
사파리(Safari)	`Ctrl` + `Alt` + `C`	-	`Cmd` + `Option` + `C`
인터넷 익스플로러(Internet Explorer11)	`F12`	-	-

명령어 정리

각 API에 대한 브라우저별 지원 여부는 MDN 사이트 잘 정리되어 있으니 참고하자.

명령어/예제	설명
console.log(document);	메시지를 표시한다.
console.debug(document);	console.log와 동일하다.
console.warn(document);	"경고" 아이콘과 같이 메시지를 표시한다.
console.error(document);	"오류" 아이콘과 같이 메시지를 표시한다.
console.info(document);	"정보" 아이콘과 같이 메시지를 표시한다.
console.dir(document);	개체의 속성이 표시된다.
console.trace(1, 2, 3);	호출 스택을 표시한다.
console.assert('test'.length < 2, "length >= 2");	데이터 확인도 가능하다.
console.count('count_test');	"count_test"가 호출된 수만큼 증가된 숫자가 표시된다.
console.time('time_test');	console.time호출 시점부터 console.timeEnd 호출 시점까지 경과 시간을 표시한다.
console.timeEnd('time_test');	console.time과 같이 한쌍이며 time_test 인자는 동일해야 한다.
console.profile('profile_test');	console.profile호출 시점부터 console.profileEnd 호출 시점까지 프로파일링 리포트를 표시한다.
console.profileEnd('profile_test');	console.profile과 같이 한쌍이며 profile_test 인자는 동일해야 한다.
console.group('group_test');	console.group호출 시점부터 console.groupEnd 호출 시점까지 그룹핑한다.
console.groupCollapsed('group_test2');	console.groupCollapsed호출 시점부터 console.groupEnd 호출 시점까지 그룹핑한다.단 닫혀진 상태로 표시된다.
console.groupEnd();	console.group 혹은 console.groupCollapsed과 같이 한쌍이며 인자는 없다.
var names={0:{first:"John",last:"Smith"}}; console.table(names);	테이블 형태로 표시한다.(주의: 크롬, 파이어폭스만 지원됨.)

콘솔 메시지를 아름답게

// 간단한 샘플 코드
// 샘플 코드 1
console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');
// 샘플 코드 2
console.log("%o, %O", document.body, document.body);
// 샘플 코드 3
console.log("%c%s에  %d번째 방문자입니다.", "background: #D26187; color: white; font-size: 20px;", 'Blog', 90000);

형식	설명
%s	문자
%d, %i	정수
%f	소수점
%o	DOM 엘리먼트
%O	자바스크립트 오브젝트
%c	CSS 스타일

브라우저 별 사용법 및 상세 설명

콘솔창 이스트 에그(Easter Egg)

파이어폭스 개발자 도구 공식 사이트에서 Ctrl + Shift + K 누르면 특정 메시지가 표시된다.
파이어폭스에서 console.mihai(); 입력하면 특정 URL주소가 표시된다.
페이스북(Facebook) 접속 후 콘솔창을 활성화하면 경고 문구가 출력된다.
사운드클라우드(SoundClud) 접속 후 콘솔창을 활성화하면 채용 사이트 주소를 보여준다.

함께보기

마무리하며

크롬, 파이어폭스, 사파리의 코드 에디터는 CodeMirror 라이브러리를 사용하고 있다. 인터넷익스플로러는 모르겠다.
개발자 도구의 영감을 준 파이어버그(Firebug)는 파이어폭스 에드온으로 많은 사랑을 받았고 아직 프로젝트는 멈추지 않고 진행중이지만 브라우저 별 개발자 도구가 생기고 기능또한 많이 비슷해져서 파이어버그를 찾는 사람이 조금씩 줄어들고 있다.

콘솔 API 일부만 소개했는데 시간될 때 각 브라우저별 공식 사이트를 참고하면 웹 개발이 더욱 즐거워질수 있다.

덧, 콘솔 API는 브라우저별 그리고 버전에 따라 지원 여부 및 방식이 다를 수 있으니 꼭 확인하고 사용하자.