Chrome DevTools는 Chrome 브라우저에 직접 내장된 웹 개발자 도구 모음입니다. DevTools를 사용하면 페이지를 즉시 수정하고 문제를 빠르게 진단할 수 있으므로 궁극적으로는 더 나은 웹사이트를 더 빠르게 빌드할 수 있습니다.
동영상에서 CSS 디버깅, CSS 프로토타입 제작, 자바스크립트 디버깅, 로드 성능 분석 등 핵심 DevTools 워크플로를 실시간으로 시연할 수 있습니다.
DevTools 열기
DevTools UI의 다양한 부분에 빠르게 액세스하기를 원하는 사용자마다 DevTools를 여는 방법은 다양합니다.
- DOM 또는 CSS로 작업하려면 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택하여 Elements 패널로 이동합니다. 또는 Command+Option+C (Mac) 또는 Control+Shift+C (Windows, Linux, ChromeOS)를 누릅니다.
- 기록된 메시지를 보거나 자바스크립트를 실행하려면 Command+Option+J (Mac) 또는 Control+Shift+J (Windows, Linux, ChromeOS)를 눌러 콘솔 패널로 바로 이동하세요.
자세한 내용 및 워크플로는 Chrome DevTools 열기를 참고하세요.
시작하기
숙련된 웹 개발자라면 DevTools로 생산성을 높이는 방법을 알아보려면 다음부터 시작하는 것이 좋습니다.
DevTools 살펴보기
DevTools UI는 조금 복잡할 수 있습니다. 탭이 너무 많아서요. 하지만 각 탭에 익숙해지면서 가능한 작업을 파악해 보면 DevTools가 생산성을 크게 향상시킬 수 있다는 사실을 발견할 수도 있습니다.
기기 모드
휴대기기 시뮬레이션
요소 패널
DOM 및 CSS를 보고 변경합니다.
- DOM 보기 및 변경 시작하기
- CSS 확인 및 변경 시작하기
- CSS 수정
- DOM 수정
- 무효, 재정의, 비활성 및 기타 CSS 찾기
- CSS 개선 가능성 파악
- 밝은 테마/어두운 테마, 대비, 기타 CSS 미디어 기능 에뮬레이션
- 사용하지 않는 CSS 찾기
- 애니메이션 검사
콘솔 패널
콘솔에서 메시지를 보고 JavaScript를 실행합니다.
소스 패널
자바스크립트를 디버그하고, 페이지 새로고침 시 DevTools의 변경사항을 유지하고, 자바스크립트 스니펫을 저장 및 실행하고, DevTools의 변경사항을 로컬 소스에 저장합니다.
- 자바스크립트 디버깅 시작하기
- 중단점을 사용하여 코드 일시중지
- 작업공간에서 파일 수정 및 저장하기
- 자바스크립트 스니펫 실행
- 자바스크립트 디버깅 참조
- 로컬에서 웹 콘텐츠 및 HTTP 응답 헤더 재정의
네트워크 패널
네트워크 활동을 보고 디버그합니다.
Recorder 패널
사용자 플로우를 녹화, 재생, 측정합니다.
성능 패널
부하 및 런타임 성능을 개선할 방법 찾기
메모리 패널
페이지 성능에 영향을 미치는 메모리 문제(예: 메모리 누수)를 찾아 해결합니다.
애플리케이션 패널
IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시, 이미지, 글꼴, 스타일시트를 포함하여 로드된 모든 리소스를 검사합니다.
보안 패널
혼합 콘텐츠 문제, 인증서 문제 등을 디버그합니다.
커뮤니티
엔지니어링팀의 버그 추적기인 Crbug에서 버그 신고 및 기능 요청을 제출합니다.
버그나 기능 요청을 알리고 싶지만 시간이 부족하다면 @ChromeDevTools로 트윗을 보내주세요. Google에서는 정기적으로 계정에 회신을 보내 공지를 보내드립니다.
DevTools 사용과 관련해 도움이 필요하시면 Stack Overflow를 이용하시는 것이 좋습니다.
DevTools 문서에서 버그를 신고하거나 기능을 요청하려면 GitHub 문제를 여세요.
DevTools에도 Slack 채널이 있지만 팀에서는 지속적으로 모니터링하지는 않습니다.