Chrome DevTools는 Chrome 브라우저에 직접 내장된 웹 개발자 도구 모음입니다. DevTools를 사용하면 즉시 페이지를 수정하고 문제를 진단할 수 있으므로 더 나은 웹사이트를 더 빠르게 빌드할 수 있습니다.
시작하기 새로운 소식 알아보기
DevTools는 다양한 일반적인 웹 개발 작업을 지원합니다. 이 페이지에서 DevTools의 주요 기능을 살펴보세요. 어디서부터 시작해야 할지 모르거나 DevTools를 처음 사용하시나요? DevTools 소개 동영상 보기
AI 지원, 콘솔 통계, 코드 추천, 자동 주석 등을 통해 더 효율적으로 디버깅할 수 있습니다.
페이지 실적을 종합적으로 파악하고 실행 가능한 조치를 취하세요.
페이지에서 로드된 리소스를 검사하고 브라우저에서 수정하는 방법을 알아보세요.
네트워크 요청 및 응답을 실시간으로 분석하고 덮어씁니다.

AI로 디버그

DevTools의 AI 혁신을 통해 더 많은 작업을 더 빠르게 처리하는 방법을 알아보세요.
Gemini를 사용하면 웹사이트의 스타일, 네트워크, 소스, 성능을 분석하고 개선할 수 있습니다.
Gemini를 사용하여 콘솔 및 소스 패널에서 코드를 작성하는 동안 코드 추천을 받으세요.
DevTools의 콘솔 메시지와 오류를 이해하고 복사하여 붙여넣지 않고도 이를 수정하는 방법을 알아봅니다.
AI 워크플로 내에서 네트워크 활동을 검사하고, 트레이스를 기록하고, 웹 애플리케이션 문제를 해결하는 데 사용하는 것과 동일한 신뢰할 수 있는 도구를 코딩 에이전트에게 제공하세요.

Chrome DevTools MCP(모델 컨텍스트 프로토콜) 서버를 원하는 도구(예: Gemini CLI, Claude Code, Cline, Copilot)에 연결합니다.

GitHub에서 자세히 알아보기

개발자 도구 도움말

DevTools의 일반적인 디버깅 시나리오를 재미있게 안내하는 월간 동영상 시리즈를 살펴보세요.
업데이트된 성능 패널을 둘러보며 핵심 성능 지표 (LCP, CLS, INP)를 측정하는 방법과 Gemini에서 맞춤 조언을 받는 방법을 알아보세요.
DevTools를 사용하여 디버깅 해적이 되어 보세요. 포커스 스타일 에뮬레이션, 자동 완성으로 양식 테스트, 네트워크 재정의로 백엔드 오류 해결 기법을 알아봅니다.
Chrome DevTools로 AI 지원 디버깅의 강력한 기능을 살펴보세요. 스타일, 성능, 네트워크, 소스를 위한 Console Insights 및 AI 지원이 워크플로를 어떻게 강화하는지 알아보세요.
성능 병목 현상을 찾고, 팝업을 디버그하고, 네트워크 조건을 구성하고, 단축키를 사용하여 네트워크 요청 이니시에이터를 확인하는 등 고급 네트워크 패널 기법을 살펴봅니다.

실적 통계 확인하기

런타임 성능의 다양한 측면을 측정하고 최적화하는 데 도움이 되는 다양한 도구(성능 패널, Lighthouse 등)
성능 패널의 모든 기능(성능 트레이스 기록 방법, 트레이스 보기 및 분석 방법 등)을 알아보세요.
CPU 제한 조정 보정과 같은 새로운 DevTools 기능을 사용하여 실제 데이터를 기반으로 성능 디버깅 결정을 내리는 방법을 알아보세요.
DevTools 성능 패널에서 Lighthouse의 강력한 기능인 새로운 성능 통계에 대해 알아보세요.

뉴스 및 업데이트

리소스 검사 및 수정하기

소스 패널의 모든 기능(파일 보기 및 수정, JavaScript 디버그, 워크스페이스 설정 방법)을 알아봅니다.
시작하기
Workspace를 사용하면 DevTools 내에서 변경한 내용을 컴퓨터에 저장된 소스 코드에 저장할 수 있습니다. 자체 프로젝트에서 워크스페이스를 설정하는 방법을 알아봅니다.
가이드 읽기

네트워크 활동 분석하기

응답 및 요청 본문 검사, 헤더 덮어쓰기 등 네트워크 패널의 모든 기능에 대해 알아보세요.
시작하기
네트워크 패널 내의 일반적인 작업을 안내하는 실습 튜토리얼입니다.
가이드 읽기

도구 더보기

DevTools의 다른 모든 기능을 살펴보세요.
페이지의 DOM을 확인하고 변경하는 방법을 알아봅니다.
페이지의 CSS를 확인하고 변경하는 방법 알아보기
HTML, CSS 및 자바스크립트의 변경사항을 추적합니다.
메시지를 기록하고 JavaScript를 실행합니다.
웹사이트 실적을 평가합니다.
메모리 누수 등을 포함하여 페이지 성능에 영향을 미치는 메모리 문제를 찾습니다.
웹 앱 검사, 수정, 디버그, 캐시 테스트, 스토리지 보기 등을 수행합니다.
애니메이션을 검사하고 수정합니다.
사용자 플로우를 녹화, 재생, 측정하고 단계를 수정합니다.
웹 콘텐츠 렌더링에 영향을 미치는 옵션 모음을 알아봅니다.
저장된 주소를 검사하고 디버그합니다.
웹사이트 관련 문제를 찾아 해결합니다.
HTTPS로 페이지가 완전히 보호되는지 확인합니다.
브라우저 탭별로 정보를 보고 미디어 플레이어를 디버그합니다.
기기 센서를 에뮬레이션합니다.
인증자 에뮬레이션