# Chrome DevTools 빠른 참조

*Elements, Console, Network, Performance, 디버깅*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Elements

### 검사 & 편집

| Command | Description |
|---------|-------------|
| `Right-click -> Inspect` | 요소의 Elements 패널 열기 |
| `Double-click tag/attribute` | HTML 인라인 편집 |
| `Delete key` | 선택한 노드 삭제 |
| `Ctrl+Z` | DOM 변경 실행 취소 |
| `H key` | 선택한 요소 표시/숨기기 토글 |
| `Drag node` | DOM 트리에서 요소 이동 |

### Styles 패널

| Command | Description |
|---------|-------------|
| `element.style {}` | 요소에 인라인 스타일 추가 |
| `Click property value` | CSS 값 라이브 편집 |
| `Checkbox next to rule` | CSS 속성 켜기/끄기 |
| `:hov button` | 요소 의사 클래스 강제 적용 (:hover, :focus) |
| `.cls button` | CSS 클래스 추가/제거 |
| `Color swatch` | 색상 선택기 열기 |
| `Computed tab` | 최종 계산된 CSS 값 보기 |

## Console

### Console API

```
console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");
```

### Console 유틸리티

| Command | Description |
|---------|-------------|
| `$0` | Elements에서 현재 선택된 요소 |
| `$('sel') / $$('sel')` | querySelector / querySelectorAll 단축 |
| `copy(obj)` | 객체를 문자열로 클립보드에 복사 |
| `clear()` | 콘솔 출력 지우기 |
| `monitor(fn)` | 함수 fn 호출 로깅 |
| `monitorEvents(el, 'click')` | 요소의 이벤트 로깅 |
| `keys(obj) / values(obj)` | 객체 키 / 값 |
| `$_ ` | 마지막 평가 표현식의 결과 |

### 필터링

| Command | Description |
|---------|-------------|
| `Log levels dropdown` | verbose/info/warn/error로 필터 |
| `Filter text box` | 콘솔 출력 검색 |
| `-url:extension` | 소스 URL로 메시지 제외 |
| `context: dropdown` | iframe/worker 컨텍스트로 필터 |

## Network

### Network 패널 기능

| Command | Description |
|---------|-------------|
| `Filter bar` | 유형별 필터: XHR, JS, CSS, Img, Doc, WS |
| `Search (Ctrl+F)` | 모든 요청/응답 본문 검색 |
| `Preserve log` | 페이지 이동 후에도 로그 유지 |
| `Disable cache` | DevTools 열린 동안 브라우저 캐시 우회 |
| `Throttling dropdown` | Slow 3G, Fast 3G, Offline 시뮬레이션 |
| `Block request URL` | 요청 우클릭 -> Block URL |

### 요청 세부 탭

| Command | Description |
|---------|-------------|
| `Headers` | 요청/응답 헤더, 상태 코드 |
| `Payload` | POST 본문, 쿼리 파라미터 |
| `Preview` | 서식 있는 응답 (JSON, HTML, 이미지) |
| `Response` | 원시 응답 본문 |
| `Timing` | DNS, 연결, TLS, TTFB, 다운로드 |
| `Initiator` | 요청을 트리거한 스택 트레이스 |
| `Cookies` | 전송/수신된 쿠키 |

### 복사 & 내보내기

| Command | Description |
|---------|-------------|
| `Right-click -> Copy as cURL` | 요청을 cURL 명령으로 복사 |
| `Copy as fetch` | fetch() JavaScript로 복사 |
| `Export HAR` | 모든 요청을 HAR 파일로 내보내기 |
| `Copy response` | 응답 본문을 클립보드에 복사 |

## Sources

### 중단점

| Command | Description |
|---------|-------------|
| `Click line number` | 라인 중단점 토글 |
| `Right-click -> Conditional` | 표현식이 참일 때만 중단 |
| `Right-click -> Logpoint` | 실행 중단 없이 로깅 |
| `DOM breakpoint` | 서브트리/속성/제거 시 중단 |
| `XHR/Fetch breakpoint` | URL에 문자열 포함 시 중단 |
| `Event listener breakpoint` | 특정 이벤트 유형 시 중단 |

### 디버거 컨트롤

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | 실행 재개 / 일시 중지 |
| `F10` | 다음 함수 호출 건너뛰기 |
| `F11` | 함수 호출 안으로 들어가기 |
| `Shift+F11` | 현재 함수에서 나오기 |
| `Ctrl+Shift+P -> "never pause"` | 모든 중단점 비활성화 |

### 디버그 패널

| Command | Description |
|---------|-------------|
| `Watch` | 표현식 값 모니터링 |
| `Scope` | 로컬, 클로저, 전역 변수 |
| `Call Stack` | 함수 호출 체인 |
| `Snippets` | 재사용 가능한 JS 코드 저장 및 실행 |

## Performance

### 녹화

| Command | Description |
|---------|-------------|
| `Record button (Ctrl+E)` | 성능 녹화 시작/중지 |
| `Reload button` | 페이지 로드 성능 녹화 |
| `Screenshots checkbox` | 시각적 타임라인 캡처 |
| `CPU throttle dropdown` | CPU 4x/6x 속도 저하 시뮬레이션 |
| `Network throttle` | 녹화 중 느린 네트워크 시뮬레이션 |

### 플레임 차트 읽기

| Command | Description |
|---------|-------------|
| `Main track` | JavaScript 실행 (플레임 차트) |
| `Network track` | 네트워크 요청 타임라인 |
| `Frames track` | FPS 및 프레임 지속 시간 |
| `Timings track` | FCP, LCP, DCL, Load 마커 |
| `Yellow bars` | JavaScript (스크립팅) |
| `Purple bars` | 레이아웃 / 렌더링 |
| `Green bars` | 페인팅 / 합성 |

### Bottom-Up & Summary

| Command | Description |
|---------|-------------|
| `Summary tab` | 시간 분류: 스크립팅, 렌더링 등 |
| `Bottom-Up tab` | 가장 비용이 큰 함수 먼저 |
| `Call Tree tab` | 루트에서 리프까지 호출 계층 |
| `Event Log tab` | 시간순 이벤트 목록 |

## Application

### 스토리지

| Command | Description |
|---------|-------------|
| `Local Storage` | 오리진별 키-값 쌍 보기/편집 |
| `Session Storage` | 세션 범위 스토리지 보기/편집 |
| `IndexedDB` | 객체 스토어 및 레코드 검사 |
| `Cookies` | 도메인별 쿠키 보기/편집/삭제 |
| `Cache Storage` | Service Worker 캐시 검사 |
| `Clear storage` | 선택한 스토리지 유형 일괄 삭제 |

### Service Workers & Manifest

| Command | Description |
|---------|-------------|
| `Service Workers` | 등록, 상태, push/sync 보기 |
| `Update on reload` | 리로드 시마다 SW 강제 업데이트 |
| `Bypass for network` | SW 건너뛰고 네트워크로 직접 요청 |
| `Manifest` | 웹 앱 매니페스트 세부 정보 보기 |
| `Offline checkbox` | 오프라인 모드 시뮬레이션 |

## Lighthouse

### 감사 실행

| Command | Description |
|---------|-------------|
| `Mode: Navigation` | 전체 페이지 로드 감사 |
| `Mode: Timespan` | 시간 경과에 따른 사용자 상호작용 감사 |
| `Mode: Snapshot` | 현재 페이지 상태 감사 |
| `Categories` | 성능, 접근성, 모범 사례, SEO |
| `Device` | 모바일 또는 데스크톱 시뮬레이션 |

### 핵심 지표

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | 첫 번째 콘텐츠 표시까지 걸린 시간 |
| `LCP (Largest Contentful Paint)` | 가장 큰 시각 요소 표시까지 걸린 시간 |
| `TBT (Total Blocking Time)` | 긴 작업의 총 블로킹 시간 합계 |
| `CLS (Cumulative Layout Shift)` | 시각적 안정성 점수 |
| `SI (Speed Index)` | 콘텐츠가 시각적으로 채워지는 속도 |
| `INP (Interaction to Next Paint)` | 사용자 입력에 대한 반응성 |

## 단축키

### DevTools 열기

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | DevTools 열기/닫기 토글 |
| `Ctrl+Shift+J` | Console 패널 열기 |
| `Ctrl+Shift+C` | Elements + 검사 모드 열기 |
| `Ctrl+Shift+M` | 기기 툴바(반응형) 토글 |

### 탐색 & 검색

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | 명령 메뉴 (모든 작업 실행) |
| `Ctrl+P` | 파일 열기 (Go to File) |
| `Ctrl+Shift+F` | 모든 소스 검색 |
| `Ctrl+G` | Sources에서 라인 번호로 이동 |
| `Ctrl+[ / Ctrl+]` | 패널 간 전환 |

### 편집 & Console

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | DevTools 도킹 위치 토글 |
| `Ctrl+L (Console)` | 콘솔 출력 지우기 |
| `Shift+Enter (Console)` | 여러 줄 입력 |
| `Esc` | 콘솔 드로어 토글 |
| `Ctrl+K (Console)` | 콘솔 지우기 |

## 모바일 디버그

### 기기 툴바

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | 기기 툴바 토글 |
| `Device dropdown` | 사전 설정 폰/태블릿 크기 |
| `Responsive mode` | 뷰포트 자유 조정 |
| `DPR dropdown` | 기기 픽셀 비율 변경 |
| `Throttling` | 모바일 CPU + 네트워크 시뮬레이션 |
| `Show media queries` | CSS 중단점 시각화 |

### 원격 디버깅 (Android)

| Command | Description |
|---------|-------------|
| `1. Enable USB debugging` | 기기에서 설정 -> 개발자 옵션 |
| `2. Connect USB` | Android 기기를 컴퓨터에 연결 |
| `3. chrome://inspect` | 데스크톱 Chrome에서 열기 |
| `4. Click Inspect` | 모바일 페이지용 DevTools 열기 |

*데스크톱과 Android 기기 모두 Chrome 필요*

### 센서 재정의

| Command | Description |
|---------|-------------|
| `Geolocation` | GPS 좌표 재정의 |
| `Orientation` | 기기 방향 시뮬레이션 |
| `Touch` | 터치 이벤트 시뮬레이션 |
| `Idle detection` | 유휴 감지 API 재정의 |

## 일반 패턴

### 네트워크 문제 디버그

```
// In Console: monitor all fetch requests
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};
```

### 성능 워크플로우

| Command | Description |
|---------|-------------|
| `1. Lighthouse audit` | 상위 성능 문제 파악 |
| `2. Performance recording` | 플레임 차트에서 긴 작업 찾기 |
| `3. Coverage tab` | 미사용 CSS/JS 탐색 (Ctrl+Shift+P -> Coverage) |
| `4. Network waterfall` | 블로킹 리소스 파악 |
| `5. Rendering tab` | 페인트/레이아웃 시각화 (Ctrl+Shift+P -> Rendering) |

### 유용한 Console 스니펫

```
// List all event listeners on element
getEventListeners($0);

// Monitor layout shifts
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });
```