Table of Content

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


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

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

개발자 도구 콘솔창 단축키

브라우저WindowsLinuxMac
크롬(Chrome)Ctrl + Shift + JCtrl + Shift + JCmd + Option + J
파이어폭스(FireFox)Ctrl + Shift + KCtrl + Shift + KCmd + 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소수점
%oDOM 엘리먼트
%O자바스크립트 오브젝트
%cCSS 스타일

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

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

함께보기


마무리하며

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

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

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

댓글 16개

  1. 파이어폭스 콘솔창에 메시지 출력은 "Tabzilla"라는 JS 파일에서 관리되고 있었다. 별도의 페이지도 존재한다.
    https://bedrock.readthedocs.org/en/latest/tabzilla.html
  2. 위 리스트 중 "Krugle"은 코드 검색 플랫폼을 판매하는 회사로 해당 플랫폼을 테스트하고 입증하기 위한 서비스 페이지라고 보면 될거 같은데, 만약 회사에서 코드 관리 목적으로 이러한 플랫폼이 필요하다면 고려해 볼만한 플랫폼인거 같다.
  3. 남의 코드를 보고 싶을때, Github와 같은 프로젝트 단위의 사이트는 이해해야하는 시간적 문제가 있지만 이런 간단한 코드 공유 사이트는 단일 파일인 경우가 많아 잠깐 훝어보기에 적합하다.
  4. 간단한 코드 테스트하기에 정말 좋은 서비스다.
    자주 이용하고 있다.
  5. 언어별 커뮤니티 사이트를 보여주는 그래프를 만들어봐도 재미있을거 같다.
  6. 서브라임텍스트에서는 euc-kr 문서 작업은 적합하지 않다.
    euc-kr 문서가 많다면 다른 에디터 사용을 권장한다.
  7. 버전관리는 개발팀에서는 안쓸 이유가 없다. 그리고 어떤 버전관리 시스템을 쓰는 지는 중요하지 않다.
  8. 정말 좋은 프로젝트들이 많다.
    그리고 계속 새로운 프로젝트들이 생기고 있다. Github는 개발자를 잘 이해하는 서비스인거 같다.
  9. PHP7 기대가 많이된다.
  10. 명령어는 짧은데 막상 필요할때 한번에 써지지 않는다...
  11. 개인적으로 너무 만족하며 구독하고 있다.
    여행지 선택하기도 좋고 여행가서 먹을 집 찾는데도 도움이된다.
  12. 줄리아 헬로우 월드만 찍어보고 다음 진행을 못하고 있다...
  13. 페북 프론트엔드 개발그룹(https://www.facebook.com/groups/webfrontend)에서 좋은 지적이 있어 내용에 살작 추가했다.

    console.log는 ie8이하 버전에서 오류를 발생한다.
    물론 해결 방법은 있지만 알고 사용하는 것과 모르고 사용하는것은 다르니 명시해서 나쁠 것이 없다는거에 동의한다.
  14. 유용한 포스팅 감사합니다~~~ ^^
  15. http://phptester.net/ 사이트 추가

    PHP만 지원하지만 결과 출력이 빠른 장점이 있다.
  16. 댓글 감사합니다 ^^