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 등)
성능 패널의 모든 기능(성능 트레이스 기록 방법, 트레이스 보기 및 분석 방법 등)을 알아보세요.
성능 패널은 15년 가까이 개발자가 런타임 성능을 측정하고 최적화하는 데 도움을 주었습니다. 앞으로 어떻게 발전할지 알아보세요.
트레이스에 주석을 달고 트레이스 파일 내에 직접 저장하여 간편하게 공유할 수 있습니다.

뉴스 및 업데이트

Chrome DevTools로 고급 네트워크 분석

Updated 2025년 2월 27일

Chrome DevTools로 고급 네트워크 분석을 수행하세요.

Chrome DevTools에 Gemini를 도입한 방법

Updated 2025년 1월 14일

DevTools의 새로운 AI 지원 패널의 재미있고 흥미로운 사용 사례에 대해 알아보세요.

DevTools로 성능 트레이스 기록 및 분석

Updated 2024년 12월 5일

DevTools로 성능 트레이스를 기록하고 분석합니다.

리소스 검사 및 수정

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

네트워크 활동 분석

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

도구 더보기

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