SlideShare a Scribd company logo
1 of 27
Download to read offline
우리가 몰랐던 크롬 개발자 도구
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.

More Related Content

What's hot

4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴Terry Cho
 
3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐Terry Cho
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스Arawn Park
 
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) 마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) Amazon Web Services Korea
 
Git 입문자를 위한 가이드
Git 입문자를 위한 가이드Git 입문자를 위한 가이드
Git 입문자를 위한 가이드chandler0201
 
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)NTT DATA Technology & Innovation
 
코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개태준 문
 
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017AWSKRUG - AWS한국사용자모임
 
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介クラウドDWHとしても進化を続けるPivotal Greenplumご紹介
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介Masayuki Matsushita
 
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기YongSung Yoon
 
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送Google Cloud Platform - Japan
 
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)fisuda
 
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?VMware Tanzu Korea
 
Rundeck's History and Future
Rundeck's History and FutureRundeck's History and Future
Rundeck's History and Futuredev2ops
 
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint [D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint NAVER D2
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!Tetsutaro Watanabe
 
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話Takuto Wada
 
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기NHN FORWARD
 

What's hot (20)

4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴4. 대용량 아키텍쳐 설계 패턴
4. 대용량 아키텍쳐 설계 패턴
 
3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐3. 마이크로 서비스 아키텍쳐
3. 마이크로 서비스 아키텍쳐
 
우아한 모노리스
우아한 모노리스우아한 모노리스
우아한 모노리스
 
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트) 마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
마이크로서비스 기반 클라우드 아키텍처 구성 모범 사례 - 윤석찬 (AWS 테크에반젤리스트)
 
Git 입문자를 위한 가이드
Git 입문자를 위한 가이드Git 입문자를 위한 가이드
Git 입문자를 위한 가이드
 
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
 
코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개코드로 인프라 관리하기 - 자동화 툴 소개
코드로 인프라 관리하기 - 자동화 툴 소개
 
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017
AWS 기반 대규모 트래픽 견디기 - 장준엽 (구로디지털 모임) :: AWS Community Day 2017
 
Rest ful api設計入門
Rest ful api設計入門Rest ful api設計入門
Rest ful api設計入門
 
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介クラウドDWHとしても進化を続けるPivotal Greenplumご紹介
クラウドDWHとしても進化を続けるPivotal Greenplumご紹介
 
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
[Spring Camp 2018] 11번가 Spring Cloud 기반 MSA로의 전환 : 지난 1년간의 이야기
 
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送
[Cloud OnAir] Bigtable に迫る!基本機能も含めユースケースまで丸ごと紹介 2018年8月30日 放送
 
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)
NGSIv1 を知っている開発者向けの NGSIv2 の概要 (Orion 3.1.0対応)
 
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?
MSA 전략 2: 마이크로서비스, 어떻게 구현할 것인가?
 
Rundeck's History and Future
Rundeck's History and FutureRundeck's History and Future
Rundeck's History and Future
 
PostGIS 시작하기
PostGIS 시작하기PostGIS 시작하기
PostGIS 시작하기
 
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint [D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint
[D2] java 애플리케이션 트러블 슈팅 사례 & pinpoint
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
 
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
 
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기
[2019] PAYCO 쇼핑 마이크로서비스 아키텍처(MSA) 전환기
 

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

[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기NAVER D2
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법Gihyo Joshua Jang
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기Chang W. Doh
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기Miyu Park
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Sang Seok Lim
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기Chang W. Doh
 
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!SangHoon Han
 
Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지Bansook Nam
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...JinKwon Lee
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST_NHNent
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for AppspressoKTH, 케이티하이텔
 
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템강 민우
 
모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016Jongwon Kim
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'강 민우
 
크로스(멀티)브라우저 테스트수행가이드
크로스(멀티)브라우저 테스트수행가이드크로스(멀티)브라우저 테스트수행가이드
크로스(멀티)브라우저 테스트수행가이드SangIn Choung
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteSeok-yong Kim
 

Similar to 우리가 몰랐던 크롬 개발자 도구 (20)

[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법
 
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
이제 온라인이다! 브라우저 안으로 들어온 Visual studio!
 
Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
 
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso[H3 2012] Bridge over troubled water : make plug-in for Appspresso
[H3 2012] Bridge over troubled water : make plug-in for Appspresso
 
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템
[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템
 
모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016모바일 게임 테스트 자동화 Igc 2016
모바일 게임 테스트 자동화 Igc 2016
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'
[IGC 2017] 엔지메이킹 이대희 - 이제는 웹에서 게임을 만들 수 있는 환경 'Construct3를 바탕으로'
 
크로스(멀티)브라우저 테스트수행가이드
크로스(멀티)브라우저 테스트수행가이드크로스(멀티)브라우저 테스트수행가이드
크로스(멀티)브라우저 테스트수행가이드
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 

More from Jae Sung Park

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenesJae Sung Park
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기Jae Sung Park
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지Jae Sung Park
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjsJae Sung Park
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event worksJae Sung Park
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular jsJae Sung Park
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJSJae Sung Park
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅Jae Sung Park
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - PolymerJae Sung Park
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기Jae Sung Park
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana RubleJae Sung Park
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio APIJae Sung Park
 

More from Jae Sung Park (20)

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
 
Web Audio API
Web Audio APIWeb Audio API
Web Audio API
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
 

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

  • 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 실행중인 자바스크립트 객체를 이름 또는 값으로 검색할 수 있도록 함