크롬 개발자 도구들의 다양한 기능들을 살펴봅니다.

1. 우리가 몰랐던 크롬 개발자 도구
2014.03.19
naver_박재성
* Based on chrome 33

2. index
1. Workspaces
2. Local Modifications
3. Console API
4. Command Line API
5. Experiments
6. Remote Debugging
7. Flame Chart
8. Rendering
9. Finding forced synchronous layouts
10. Mobile Emulation
11. Audits
12. Layer Panel
13. Breakpoints
14. Miscellaneous
15. Plugin : JS Runtime Inspector

3. Workspaces
로컬서버의 리소스 파일을 매핑해 브라우저 상에서 직접 수정이 가능하도록 함
• element 패널의 DOM 변경은 반영되지 않음
• element 패널의 스타일 변경만 반영
• 외부 css/JS의 파일 내용 변경가능
• element.style과 inline style은 반영되지 않음
• element 패널의 스타일 변경은 바로 적용되며, 파일에도 변경사항 저장됨
• Sources 탭에서의 변경은 Ctrl + S (Mac : command + S)를 눌러 저장
1. Workspace 폴더를 지정 2. 브라우저에서 해당 페이지와 파일 매핑

4. Local Modifications
개발자 도구에서 변경된 파일에 대한 history 관리

5. console.assert(expression, string);
조건이 거짓인 경우 출력
console.count(string);
호출된 횟수를 문자열과 출력
console.time(string) / console.timeEnd(string)
수행된 시간을 측정
Console API

6. console.group(), console.groupCollapsed() / console.groupEnd()
로그를 그룹핑해 출력. 중첩된 그룹핑도 가능
console.table([ … ]);
테이블 형태로 출력
debugger
디버깅을 위한 중단점 지정
Console API

7. 포맷 설명
%s 문자열
%d, %i 숫자
%f Floating point
%o DOM 요소
%O JavaScript 객체
%c CSS 스타일 적용
https://developers.google.com/chrome-developer-tools/docs/console-api
Console API
console.log(object [, object, … ])
포맷을 지정하거나 스타일이 적용된 출력을 할수 있다.

8. 콘솔에서만 사용 가능한 API로, 코드상에서는 사용할 수 없음.
동일한 함수가 코드상에 존재하는 경우는 코드상의 함수가 우선됨.
$(selector)
document.querySelector - CSS 셀렉터를 사용한 선택
$$(selector)
document.querySelectorAll - CSS 셀렉터를 사용한 선택
$x(selector)
Xpath 표현식을 사용한 선택
$_
마지막 수행된 표현식의 결과값을 반환
$0 ~ $4
Elements 탭에서 선택되었던 마지막 5개 DOM 요소를 기억
copy(object)
클립보드에 내용 복사
inspect(object)
Elements 탭에 지정된 요소가 선택되도록 한다.
Command Line API

9. Command Line API
getEventListeners(object)
등록된 이벤트 리스너를 반환
keys()
객체에서 key 값만을 반환

10. Command Line API
monitorEvents(object[, events])
지정된 이벤트 발생시 콘솔에 로깅
unmonitorEvents(object[, events])
등록된 이벤트 모니터링을 해제
monitor(function[, …])
등록된 함수가 호출될 때 로깅
unmonitor(function[, …])
등록된 모니터링을 해제

11. chrome://flags/#enable-devtools-experiments 또는
chrome://flags > ‘개발자 도구 실험을 사용합니다.’를 통해 활성화
Experiments

12. 크롬 개발자 도구를 활용해 모바일 기기의 크롬 브라우저의 페이지를 디버깅
• Windows에서는 해당 기기의 usb 드라이버 설치가 필요함
• http://developer.android.com/tools/extras/oem-usb.html
Remote Debugging

13. Screencast
연결된 모바일 기기의 화면이 데스크탑으로 스크린 캐스팅되어, 모바일 크롬의 출력 화면을 직접 보면서 디버깅
Remote Debugging

14. Port Forwarding
Port forwarding은 모바일 기기가 개발서버와 같은 네트워크 내에 속하지 않거나 여러 다른 상황으로 인해 모바일
기기에서 개발서버의 웹 페이지 접근이 어려운 경우 사용될 수 있으며, usb를 통해 직접 로컬 서버에 접근하는 방법.
Remote Debugging

15. Android 4.4 (KitKat) WebView :
https://developers.google.com/chrome/mobile/docs/webview/overview#what_version_of_chrome_is_it_based_on
안드로이드 4.4 웹뷰는 크롬 30.0.0.0을 기반으로 함
그러나…
OS 업데이트가 되지 않는 이상 브라우저 자체는 업데이트 되지 않음
Remote Debugging

16. Profiles > Record JavaScript CPU profile
시간에 따른 자바스크립트 프로세싱을 시각적인 차트로 표현
Name
The name of the function.
Self time
How long it took to complete the current
invocation of the function, including only
the statements in the function itself,
not including any functions that it called.
Total time
The time it took to complete the current
invocation of this function and any
functions that it called.
Aggregated self time
Aggregate time for all invocations of the
function across the recording,
not including functions called by this function.
Aggregated total time
Aggregate total time for all invocations of the function, including functions called by this function.
Flame Chart

17. Console Tab > Rendering >
Show Paint rectangles
페인팅이 발생되는 영역을 표현해 준다.
다음의 페이지는 배경 이미지가 fixed로 지정되어 스크롤 시 마다
Paint가 발생되는 문제가 발생
Demo : http://css3exp.com/moon/
Show FPS meter
페이지의 현재 프레임 수를 보여준다.
Android 기기에서는 GPU 메모리 사용량도 같이 노출
Enable continuous page repainting
모든 스크린 영역이 지속적으로 리페인팅이 발생하도록 해서 어떤 영역이
렌더링 비용 많이 발생하는지를 추적할 수 있도록 도와준다.
* DOM tree에서 'H' 단축키를 통해 선택된 노드를 보이지 않도록 처리할 수 있으며, 이를 통해 해당 노드가
렌더링에 미치는 성능을 확인해 볼수 있다.
Rendering

18. 렌더링 성능을 향상시키기 위해 레이아웃의 변경은 배치 작업형태로 스케줄링하고 비동기로 계산하고
렌더링 된다.
하지만, 레이아웃 정보를 반환하는 다음의 속성들이 요청되는 경우, 브라우저는 즉시 ‘강제적인 동기 레이아
웃’(forced synchronous layouts)을 발생시켜 렌더링 성능을 감소시킬 수 있게 된다.
• element.offsetTop/offsetLeft/offsetWidth/offsetHeight
• element.scrollTop/Left/Width/Height
• element.clientTop/Left/Width/Height
• focus()
• getBoundingClientRect()
• getClientRects()
• innerText / outerText
• scrollByLines() / scrollByPages()
• scrollIntoView() / scrollIntoViewIfNeeded()
이런 현상을 "layout-thrashing" 이라고도 부른다.
Timeline 레코딩 후, 레코딩 결과 항목에서 노란색의 경고 아이콘을 통해 현상이 발생된 곳을 확인할 수 있다.
Demo : https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/
Finding forced synchronous layouts

19. 브라우저 UA, 스크린, pixel ratio, GPS 위치 정보 등 다양한 모바일 기기의 값을 에뮬레이팅 할 수 있다.
멀티 터치는 shift 키를 누르면 사용 가능
Mobile Emulation

20. 페이지를 분석해 성능 향상 포인트와 최적화 방법을 알려준다.
Audits

21. Demo : http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
Layers Panel
Experiments > Show Layers Panel
레이어의 구성을 입체적으로 확인할 수 있다.

22. Elements > Break on… : Element 탭에서 특정 요소에 대한 변경 발생시 중단점 설정
Breakpoints
Sources > Pause on exceptions
예외 상황 발생시 중단에 대한 설정
3가지 형태로 설정 가능 :
모든 예외상황 발생시 중단
예외처리 되지 않은 예외상황
예외상황 발생시 중단하지 않음 (기본값)
Sources > 다양한 breakpoint 설정 가능

23. Network > Replay XHR : XHR을 재요청
Sources > Watch Expressions : 지속적인 트래킹을 하고자 하는 변수 또는 표현식을 등록
Miscellaneous

24. 새로 고침
개발자 도구가 열려있는 상태에서 ‘새로 고침’ 버튼을 길게 누르면
새로 고침 옵션 사용가능. (Windows와 ChromeOS만 가능)
스타일 값 변경 단위 단축 키
Shift + PgUp/PgDown : 3자리 수 증가
Shift + Arrow, PgUp/PgDown : 2자리 수 증가
Arrow : 1자리 수 증가
Alt + Arrow : 소수점
Miscellaneous

25. Plugin : JS Runtime Inspector
크롬 개발자 도구 익스텐션
https://chrome.google.com/webstore/detail/js-runtime-inspector/iilpjebedgohcmlffhnkhbjhabkdhfmn
실행중인 자바스크립트 객체를 이름 또는 값으로 검색할 수 있도록 함

26. http://www.html5rocks.com/en/tutorials/developertools/mobile/
http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/
https://developers.google.com/chrome-developer-tools/
https://plus.google.com/u/0/+FrancoisBeaufort/posts/ef6ZatGpNMP
http://discover-devtools.codeschool.com/
Reference

27. 고맙습니다.
fin.