This is an old revision of the document!
크롬 개발자 도구 패널 |
패널 | 기능 |
Elements | HTML 요소와 CSS 스타일의 확인과 편집, DOM 브레이크 포인트 설정, 이벤트 리스너 확인 |
Console | 커맨드 라인을 이용한 웹 브라우저의 조작, 브라우저 로그의 모니터링 |
Source | 자바스크립트 코드와 CSS 코드의 디버깅 |
Network | 네트워크 작업(HTTP 요청, 쿠키, 웹 소켓)의 기록과 모니터링 |
Performance | 렌더링 성능 및 자바스크립트 함수의 실행과 처리에 걸리는 시각을 기록하여 측정 |
Memory | 사용 중인 힙 메모리의 모니터링 및 기록 |
Application | 웹 페이지를 구성하는 리소스스 파일(IndexedDB, Web SQL, 쿠키, 애플리케이션 캐시, 웹 스토리지(Web Storage))의 확인과 편집, 프로그레시브 웹 관련 검증(서비스 워커 포함) |
Security | HTTPS 연결 상태의 확인(SSL 인증서의 유효성, SSL 연결의 안전성, 자원의 보안성 검사) |
Audits | 웹 페이지 성능과 네트워크에 관련된 개선 사항은 조사하고 제안하기 |
사이드 바에 있는 각 페인의 기능 |
페인 | 기능 |
Watch | 표현식 또는 변수를 등록하면 실행 중일 때 값이 표시. + 버튼으로 표현식 또는 변수 등록 가능. |
Call Stack | 콜 스택이 표시. 어떤 함수가 호출했는지 알수 있다. |
Scope | 실행 중인 코드의 유효 범위 안에 있는 변수 값을 보고 변경 가능. |
Breakpoints | 브레이크 포인트가 설정된 위치 표시 |
XHR Breakpoints | XMLHttpRequest의 send 메서드를 실행할 때 정지하는 브레이크 포인트. + 버튼을 누르면 요청을 전송할 URL 설정 가능. |
DOM Breakpoints | Elements 패널에서 DOM 요소에 설정한 브레이크 포인트 표시. |
Global Listeners | 전역 객체(window)에 등록된 이벤트 처리기와 이벤트 리스너의 목록 표시. |
Event Listener Breakpoints | 체크한 이벤트가 발생하면 정지 |