Chrome Developer Tool 사용법
Chrome Developer Tool 사용법
1. Elements Panel
페이지 소스보기(동적 변경 포함) 및 Element 트리 내부의 모든 구성 요소 조작(선택, 추가, 수정, 삭제)이 가능합니다.
PS. 페이지상의 각 요소 선택 시 아래 돋보기 아이콘을 활용합니다.
1.1 Computed style:
브라우저 내부에서 미리 계산된(Reflow) 모든 수치 데이터를 확인합니다.
1.2 Styles:
Element 스타일의 데이터 조작(확인, 추가, 수정, 삭제)이 가능합니다.
1.3 Metrics:
Element Box Model에 대한 수치 데이터 조작(확인, 추가, 수정, 삭제)이 가능합니다.
1.4 Properties:
Element 속성 데이터 조작(확인, 추가, 수정, 삭제)이 가능합니다.
1.5 Dom Breakpoints:
Element 속성 수정 시 해당 Element에 Breaking point(종단점)를 걸어 확인합니다.
1.6 Event Listeners:
Element 이벤트 흐름을 확인합니다.
1.7 Search
DOM 트리를 검색합니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/elements
2. Resources Panel
페이지의 모든 리소스 요소를 여러 가지 분류(HTML5 WebDB(SqlLite), Local Storage, Session Storage, Cookie, AppCache등)를 통해 확인합니다.
2.1 Frames:
페이지에 로드된 모든 리소스(font, images, other(flash, xml 등), script, stylesheets)를 확인합니다.
2.2 Databases:
생성된 HTML5 WebDB를 확인합니다.
2.3 Local Storage:
생성된 Storage(Local)를 확인합니다.
2.4 Session Storage:
생성된 Storage(Session)를 확인합니다.
2.5 Cookie:
생성된 Cookie 데이터를 확인합니다.
2.6 Application cache:
생성된 AppCache 데이터를 확인합니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/resources
3. Network Panel
페이지 요청에 따른 각 리소스들의 상세 내역(HTTP 요청 / 응답, 헤더 데이터등)을 타임라인으로 확인합니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/network
4. Sources
Inline Script 및 External File Script의 소스 내역을 확인할 수 있으며, BreakPoints(종단점) 삽입 및 리얼타임 디버깅이 가능합니다.
4.1 Watch Expressions:
JS 표현식을 사용하여 리얼타임 조작이 가능합니다.
4.2 Call Stack:
JS Starck을 호출합니다.
4.3 BreakPoints:
JS 디버깅 시 소스 내역에 BreakPoints(종단점) 겁니다.
4.4 Dom Breakpoints:
DOM 디버깅 시 소스 내역에 BreakPoints(종단점) 겁니다.
4.5 XHR BreakPoints:
JS 디버깅 시 해당 XHR 요청에 BreakPoints(종단점) 겁니다.
4.6 Event Listener BreakPoints:
Event 디버깅 시 요소의 모든 Event Handler에 BreakPoints(종단점) 겁니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/scripts
5. Timeline Panel
페이지 성능에 대한 고급 내역(ReFlow, RePaint, Script(Load, Executing)등)을 타임라인을 통해 확인합니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/timeline
6. Profile Panel
페이지에 포함된 JS 함수의 cpu 사용 및 메모리 분포 내역을 레포팅합니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/profiles
7. Audits Panel
페이지 감사를 실행하여 그에 따른 최적화(페이지 로딩 시간 최소화) 방안을 제시합니다.
8. Console Panel
페이지의 모든 구성요소(HTML, JS, CSS등)에 대한 디버깅(오류 분석)을 Console 명령어를 통해 손쉽게 접근 할 수 있습니다.
참고 URL:
https://developers.google.com/chrome-developer-tools/docs/console
- Tool 참고 URL:
1. 웹킷 검사기:
http://jtaby.com/2012/04/23/modern-web-development-part-1.html
2. Console 사용법:
http://ohgyun.com/tag/Chrome%20Developer%20Tools
3. Chrome 개발자 도구의 유용한 기능!(개발자 도구 환경 설정에 대한 이야기)
