크롬 개발자 도구 활용 팁(Tips for chrome developer tools)

발생일: 2011.10.26

문제:
그 동안 개발할 때엔 대부분 파이어폭스를 사용했었는데,
최근엔 크롬 개발자 도구도 파이어버그 못지 않게 훌륭한 것 같다.

파이어폭스보다 가볍고 빠른 데다, 개발자용 확장(extension)도 많아 더욱 끌린다.

마음에 든 참에 크롬 개발자 도구(Chrome Developer Tools)를 좀 자세히 보다가,
유용한 활용 팁들을 정리해봤다.


해결책:

1. 단축키

크롬 개발자 도구에서 유용한 간단한 단축키 몇 가지~

  - 개발자 도구 열기(엘리먼트 패널) : Ctrl + Shift + C (맥일 경우 Command)

  - 개발자 도구 내 탭 전환 : Ctrl + [ or ]

  - 개발자 도구에서 콘솔 열고 닫기 : esc

도구를 여는 단축키가 3가지 있는데,
맥의 경우엔 기본 앱이 몇 가지를 물고 있어 개인적으론 엘리먼트 패널을 여는 위 단축키가 제일 좋더군요.

2. 콘솔 객체 메서드

스크립트 내에서 console.log() 처럼 사용 가능한,

console 객체의 메서드 중 유용한 것 몇 가지를 소개하려고 합니다.

콘솔 객체 메서드 관련 테스트는 jsFiddle에도 작성해두었습니다.

(http://jsfiddle.net/ohgyun/j9aec/7/)

2.1. printf 스타일 로깅

로깅 메서드의 첫 번째 파라미터가 String 일 경우, printf 스타일로 로그를 남길 수 있습니다.

  %s           String

  %d, %i      Integer

  %f            Float

  %o           Object HyperLink, Object를 로그로 남기고 싶을 경우

예)
  console.log("%s, %d원", "멜론", 8000); //--> 멜론, 8000원

2.2. 타입별 로깅

타입별로 로깅하면 타입에 따라 로그 옆에 아이콘이 표시되고,
콘솔 패널 하단에서 타입별로 구분해 확인할 수 있습니다.

  console.info(object[, object, ...])

  console.warn(object[, object, ...])

  console.error(object[, object, ...])

2.3. 타이머

  console.time(name)

  console.timeEnd(name)

name에 해당하는 타이머를 생성하고 종료 시점까지의 시간을 출력합니다.

수행 시간을 테스트할 때 유용하게 사용할 수 있을 것 같아요.

2.4. 그룹별 로깅

  console.group(object[, object, ...])

  console.groupEnd()

콘솔 메세지를 그룹핑하여 출력합니다.

  console.groupCollapsed(object[, object, ...])

  console.groupEnd()

group과 동일하지만, 그룹을 닫은 채로 출력합니다.

2.5. 프로파일링

  console.profile(title)

  console.profileEnd(title)

콘솔 객체를 통해 프로파일링을 수행할 수 있습니다.
종료되면 프로파일 패널에 리포트가 작성됩니다.

메서드 단위의 성능을 테스트할 때 유용하게 쓸 수 있을 것 같네요. 

2.6. 그 외 유용한 것들

assertion 도 가능하고,

  console.assert(expression[, object, ...])

호출 스택을 출력하는 것도 가능합니다.

  console.trace()

또한, 몇 번 호출되었는지도 체크 가능합니다.

  console.count(title)

3. 콘솔 라인 메서드

아래는 콘솔 라인 내에서 사용할 수 있는 메서드들에 대한 내용이며,

스크립트 내에서는 사용할 수 없습니다.

3.1. 노드 가져오기

  $(id) : id에 해당하는 엘리먼트를 가져옵니다.

  $$(selector) : selector에 해당하는 엘리먼트를 배열로 가져옵니다.

  $x(xpath) : xpath 구문으로 가져옵니다.

내부적으로 getElementById와 querySelectorAll을 사용하고 있네요. 

위 메서드를 사용하고 있지 않는 페이지에서 $, $$, $x를 콘솔에서 출력해보면,

구현 코드를 조회할 수 있습니다.

3.2. 선택한 노드 가져오기

전 이 변수가 제일 마음에 들던데요^^

엘리먼트 패널에서 선택한 가장 최근의 노드를 $0 변수를 통해 가져올 수 있습니다.

  $0 : 가장 최근에 엘리먼트 패널에서 선택된 노드

그 이전 노드를 선택하고자 할 때엔 $n 변수를 이용하세요.

  $1, $2, .. : n번 이전에 선택할 엘리먼트

3.3. 커맨드 라인에서 노드 조회하기

  inspect(id|object)

명령어로 커맨드 라인에서 노드를 가져와 엘리먼트 패널에서 조회할 수 있습니다.

마찬가지로 선택된 노드가 $0에 캐시됩니다.

예)

  inspect(this_is_id) // 주의: 파라미터로 id를 입력할 경우 따옴표(")는 생략

  inspect($1)

3.4. key와 value 출력

오브젝트의 key와 value를 출력합니다.

예를 들어, 콘솔 객체의 프로토타입 메서드를 조회해보고자 한다면,

콘솔 라인에서 아래 명령을 출력해보면 됩니다.

  keys(console.__proto__);

3.5. 클립보드 복사

copy() 명령어로 object 내용을 클립보드로 복사할 수 있습니다.

예를 들어,

  copy($0)

명령어는 가장 최근에 선택된 엘리먼트의 html 구문을 클립보드로 복사합니다.

3.6 monitorEvents

  monitorEvents(object[. types])

  unmonitorEvents(object[, types])

노드에서 발생하는 이벤트를 모니터링 합니다.

types 값으로 "mouse", "key" 등을 넣을 수 있습니다.

크롬 콘솔이 파이어폭스의 것을 대부분 지원하고,

firebug command line API에 따르면 types에는 아래와 같은 종류가 있는데,

모두 제공하는 것 같진 않습니다. 

("composition", "contextmenu", "drag", "focus", "form", "key", "load", "mouse", "mutation", "paint", "scroll", "text", "ui", "xul")

대신, "click", "mousedown" 등 이벤트명을 직접 입력하는 것에는 작동하네요.

#참고.

Chrome Developer Tools : http://code.google.com/intl/ko-KR/chrome/devtools/docs/overview.html

Chrome Developer Tools: Console

http://code.google.com/intl/ko-KR/chrome/devtools/docs/console.html

http://code.google.com/intl/ko-KR/chrome/devtools/docs/shortcuts.html

Firebug Console API

http://getfirebug.com/wiki/index.php/Console_API

Firebug Command Line API

http://getfirebug.com/wiki/index.php/Command_Line_API

YouTube: Become a Javascript Console Power-User

http://www.youtube.com/watch?v=4mf_yNLlgic&feature=feedu