Chrome DevTools | Chrome for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

DevTools는 다양한 일반적인 웹 개발 작업을 지원합니다. 이 페이지에서 DevTools의 주요 기능을 살펴보세요. 어디서부터 시작해야 할지 모르거나 DevTools를 처음 사용하시나요? DevTools 소개 동영상 보기

AI 어시스턴트 및 콘솔 통계

DevTools의 AI 혁신을 통해 더 많은 작업을 더 빠르게 처리하는 방법을 알아보세요.

DevTools를 사용하여 일반적인 웹 개발 문제를 해결하는 방법을 설명하는 월간 동영상 시리즈를 살펴보세요.

DevTools에서 성능 트레이스를 기록하고 이를 분석하여 성능 문제를 식별하고 해결하는 방법을 알아보세요.

LCP 문제를 디버그하고 CrUX 데이터를 사용하여 사용자와 유사한 환경을 디버그하고 있는지 확인

다양한 유형의 브라우저 캐시와 Chrome DevTools에서 이를 검사하고 관리하는 방법을 자세히 알아보세요.

요소를 검사하려고 하면 '푸프'하고 사라지나요? 코드가 나와 함께 숨바꼭질을 하는 것 같습니다.

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

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

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

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

네트워크 패널 내의 일반적인 작업을 안내하는 실습 튜토리얼입니다.

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