크롬 개발자 도구 101
Source
Evernote/Inbox/크롬 개발자 도구 101.md
Summary
이 문서는 Google Chrome 개발자 도구의 주요 패널과 기능을 소개하는 가이드입니다. Elements(HTML/CSS 검사 및 수정), Console(JS 디버깅 및 로깅), Sources(JS 소스 코드 디버깅 및 중단점), Network(네트워크 요청 분석 및 시뮬레이션), Performance(렌더링 및 JS 실행 성능 프로파일링), Application(로컬 스토리지, 서비스 워커 등 웹 앱 데이터 관리) 패널의 핵심 기능과 단축키를 설명합니다. 모바일 디바이스 시뮬레이션 및 오프라인/느린 네트워크 환경 테스트 방법도 포함됩니다.
Key Points
- Elements: DOM 구조 확인, CSS 스타일 실시간 수정, 요소 상태(:hover 등) 강제 적용, DOM 변경 중단점 설정
- Console: JS 코드 실행, 로그 레벨 필터링, console.time()을 통한 성능 측정, iframe 컨텍스트 전환
- Sources: JS 소스 코드 매핑(소스맵), 중단점 설정 및 스택 트레이스 분석, 스니펫(Snippets) 저장 및 실행
- Network: HTTP 요청/응답 헤더 및 바디 분석, 캐시 비활성화, 오프라인 모드, 네트워크 속도 시뮬레이션(3G 등)
- Performance: JS 실행 시간 및 렌더링 과정 프로파일링, 함수 호출 스택 및 시간 분석
- Application: LocalStorage/SessionStorage 데이터 확인, 서비스 워커 상태 확인, 웹 매니페스트 정보 조회
- 공통 기능: 모바일 디바이스 시뮬레이션(Ctrl+Shift+M), 요소 선택 도구(Ctrl+Shift+C)