우리가 몰랐던 크롬 개발자 도구

2014.03.19 naver_박재성

* Based on chrome 33

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

Workspaces 로컬서버의 리소스 파일을 매핑해 브라우저 상에서 직접 수정이 가능하도록 함 • element 패널의 DOM 변경은 반영되지 않음 • element 패널의 스타일 변경만 반영

• 외부 css/JS의 파일 내용 변경가능 • element.style과 inline style은 반영되지 않음

• element 패널의 스타일 변경은 바로 적용되며, 파일에도 변경사항 저장됨 • Sources 탭에서의 변경은 Ctrl + S (Mac : command + S)를 눌러 저장

1. Workspace 폴더를 지정 2. 브라우저에서 해당 페이지와 파일 매핑

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

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

Console API

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

Console API

포맷 설명

%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, … ]) 포맷을 지정하거나 스타일이 적용된 출력을 할수 있다.

콘솔에서만 사용 가능한 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

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

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

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

Experiments

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

Remote Debugging

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

Remote Debugging

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

Remote Debugging

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

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

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

렌더링 성능을 향상시키기 위해 레이아웃의 변경은 배치 작업형태로 스케줄링하고 비동기로 계산하고 렌더링 된다. 하지만, 레이아웃 정보를 반환하는 다음의 속성들이 요청되는 경우, 브라우저는 즉시 ‘강제적인 동기 레이아웃’(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

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

Mobile Emulation

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

Audits

Demo : http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

Layers Panel Experiments > Show Layers Panel 레이어의 구성을 입체적으로 확인할 수 있다.

Elements > Break on… : Element 탭에서 특정 요소에 대한 변경 발생시 중단점 설정

Breakpoints

Sources > Pause on exceptions 예외 상황 발생시 중단에 대한 설정 3가지 형태로 설정 가능 : 모든 예외상황 발생시 중단 예외처리 되지 않은 예외상황 예외상황 발생시 중단하지 않음 (기본값)

Sources > 다양한 breakpoint 설정 가능

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

Miscellaneous

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

Miscellaneous

Plugin : JS Runtime Inspector

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

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

고맙습니다. fin.