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

AI 어시스턴트 및 콘솔 통계

DevTools의 AI 혁신을 통해 더 많은 작업을 더 빠르게 처리하는 방법을 알아보세요.
Gemini를 사용하면 웹사이트의 스타일, 네트워크, 소스, 성능을 분석하고 개선할 수 있습니다.
Chrome DevTools에서 AI 어시스턴스의 사용 사례를 살펴보고 스타일 지정, 성능 등에서 디버깅 워크플로를 지원하는 방법을 알아보세요.
DevTools의 콘솔 메시지와 오류를 이해하고 복사하여 붙여넣지 않고도 이를 수정하는 방법을 알아봅니다.

DevTools 팁

DevTools를 사용하여 일반적인 웹 개발 문제를 해결하는 방법을 설명하는 월간 동영상 시리즈를 살펴보세요.
DevTools에서 성능 트레이스를 기록하고 이를 분석하여 성능 문제를 식별하고 해결하는 방법을 알아보세요.
LCP 문제를 디버그하고 CrUX 데이터를 사용하여 사용자와 유사한 환경을 디버그하고 있는지 확인
다양한 유형의 브라우저 캐시와 Chrome DevTools에서 이를 검사하고 관리하는 방법을 자세히 알아보세요.
요소를 검사하려고 하면 '푸프'하고 사라지나요? 코드가 나와 함께 숨바꼭질을 하는 것 같습니다.

실적 통계 확인하기

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

뉴스 및 업데이트

Chrome 138의 DevTools의 새로운 기능

Updated 2025년 6월 17일

성능 통계에서 사전 연결된 출처 또는 후보와 서버 응답 및 리디렉션 시간을 확인하고, 센서에서 위치정보 정확성을 에뮬레이션하고, 복잡한 CSS 변수를 디버그하는 등의 작업을 할 수 있습니다.

Chrome 137의 DevTools의 새로운 기능

Updated 2025년 5월 20일

Gemini를 사용하여 CSS를 수정하고 저장하고, 성능 통계를 알아보고, 성능 발견사항에 주석을 달고, 더 많은 작업을 할 수 있습니다.

Chrome DevTools에서 콘솔 로그의 스타일을 지정하는 방법: 색상 등

Updated 2025년 4월 30일

Chrome DevTools에서 콘솔 로그의 스타일을 지정하는 방법: 색상 등

리소스 검사 및 수정하기

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

네트워크 활동 분석하기

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

도구 더보기

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