Chrome DevTools는 Chrome 브라우저에 직접 내장된 웹 개발자 도구 모음입니다. DevTools를 사용하면 즉시 페이지를 수정하고 문제를 진단할 수 있으므로 더 나은 웹사이트를 더 빠르게 빌드할 수 있습니다.

AI로 디버그

DevTools의 AI 혁신을 통해 더 많은 작업을 더 빠르게 처리하는 방법을 알아보세요. 에이전트용 DevTools를 사용하여 DevTools의 강력한 기능을 즐겨 사용하는 코딩 에이전트에 연결하세요.

Gemini의 도움을 받아 웹사이트의 스타일, 네트워크, 소스, 성능을 분석하고 개선하세요. 콘솔 및 소스 패널에서 콘솔 오류 및 코드 추천에 대한 도움을 받으세요.

AI 워크플로 내에서 네트워크 활동을 검사하고, 트레이스를 기록하고, 웹 애플리케이션 문제를 해결하는 데 사용하는 것과 동일한 신뢰할 수 있는 도구를 코딩 에이전트에 제공합니다.

선호하는 도구인 Antigravity, Claude Code, Cline, Copilot 등에 Chrome DevTools MCP (모델 컨텍스트 프로토콜) 서버를 연결합니다.

페이지 실적을 종합적으로 파악하고 실행 가능한 조치를 취하세요.

페이지에서 로드된 리소스를 검사하고 브라우저에서 수정하는 방법을 알아보세요.

네트워크 요청 및 응답을 실시간으로 분석하고 덮어씁니다.

개발자 도구 도움말

DevTools의 일반적인 디버깅 시나리오를 재미있게 안내하는 월간 동영상 시리즈를 살펴보세요.

에이전트를 위한 Chrome DevTools를 사용하면 에이전트가 반응형 레이아웃을 확인하고, 위치 인식 API를 테스트하고, 다양한 CPU 또는 네트워크 속도를 시뮬레이션할 수 있습니다.

에이전트용 Chrome DevTools의 Lighthouse를 사용하면 코딩 에이전트가 접근성, 검색엔진 최적화, 권장사항, 에이전트 탐색에 대한 실시간 상태 점검을 실행하여 웹사이트 품질을 평가할 수 있습니다.

업데이트된 성능 패널을 둘러보며 핵심 성능 지표 (LCP, CLS, INP)를 측정하는 방법과 Gemini에서 맞춤 조언을 받는 방법을 알아보세요.

DevTools를 사용하여 디버깅 해적이 되어 보세요. 포커스 스타일 에뮬레이션, 자동 완성으로 양식 테스트, 네트워크 재정의로 백엔드 오류 해결 기법을 알아봅니다.

런타임 성능의 다양한 측면을 측정하고 최적화하는 데 도움이 되는 다양한 도구(성능 패널, Lighthouse 등)

성능 패널의 모든 기능(성능 트레이스 기록 방법, 트레이스 보기 및 분석 방법 등)을 알아보세요.

소스 패널의 모든 기능(파일 보기 및 수정, JavaScript 디버그, 워크스페이스 설정 방법)을 알아봅니다.

Workspace를 사용하면 DevTools 내에서 변경한 내용을 컴퓨터에 저장된 소스 코드에 저장할 수 있습니다. 자체 프로젝트에서 워크스페이스를 설정하는 방법을 알아봅니다.

응답 및 요청 본문 검사, 헤더 덮어쓰기 등 네트워크 패널의 모든 기능에 대해 알아보세요.

DevTools의 다른 모든 기능을 살펴보세요.