Chrome DevTools 사용 팁 및 요약

이 페이지는 Chrome 개발자 도구(DevTools) 사용을 위한 팁과 요약표(Cheat Sheet)를 제공합니다. 다양한 디버깅 작업, 네트워크 모니터링, 성능 분석 등의 기능 활용 팁이 포함되어 있습니다.

Elements(요소) 패널

작업	단축키
DevTools 열기	`F12` 또는 `Ctrl` + `Shift` + `I`
장치 도구 모음 전환	`Ctrl` + `Shift` + `M`
새로고침 및 캐시 지우기	`Ctrl` + `Shift` + `R`
요소의 컨텍스트 메뉴 보기	`우클릭`
요소 편집	`Enter`
요소 삭제	`Delete`
요소 복사	`Ctrl` + `C`
요소 붙여넣기	`Ctrl` + `V`
요소의 CSS 규칙 보기	`Ctrl` + `Shift` + `C`

Console(콘솔) 패널

작업	단축키
콘솔 열기	`Esc`
콘솔 지우기	`Ctrl` + `L`
선택한 텍스트 복사	`Ctrl` + `C`
텍스트 붙여넣기	`Ctrl` + `V`
명령 내역 보기	`위쪽 화살표` 및 `아래쪽 화살표`
객체의 상세 정보 보기	`Ctrl` + `Shift` + `C`

Network(네트워크) 패널

작업	단축키
네트워크 활동 기록 시작/중지	`Ctrl` + `E`
네트워크 로그 지우기	`Ctrl` + `R`
요청 필터링	`Ctrl` + `F`
요청 상세 정보 보기	`Ctrl` + `Shift` + `C`

Performance(성능) 패널

작업	단축키
성능 기록 시작/중지	`Ctrl` + `E`
기록된 성능 내보내기	`Ctrl` + `S`
이벤트 필터링	`Ctrl` + `F`

Memory(메모리) 패널

작업	단축키
스냅샷 찍기	`Ctrl` + `S`
스냅샷 내보내기	`Ctrl` + `Shift` + `S`
스냅샷 필터링	`Ctrl` + `F`

Application(애플리케이션) 패널

작업	단축키
애플리케이션 새로고침	`Ctrl` + `R`
스토리지 지우기	`Ctrl` + `Shift` + `R`
데이터 필터링	`Ctrl` + `F`

Security(보안) 패널

작업	단축키
인증서 보기	`Ctrl` + `Shift` + `C`
페이지를 새로고침하고 캐시 무시	`Ctrl` + `Shift` + `R`

기타 (Misc)

작업	단축키
설정 열기	`F1`
테마 전환	`Ctrl` + `Shift` + `P` 누른 후 `theme` 입력
단축키 보기	`Ctrl` + `Shift` + `P` 누른 후 `shortcuts` 입력