Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Chrome DevTools

Chrome DevTools는 Google Chrome에 내장되어있는 웹 저작 및 디버깅 도구셋입니다. DevTools를 이용하여 사이트를 반복하고, 디버깅하고, 프로파일링할 수 있습니다.

Chrome DevTools 열기

  • Chrome 메뉴에서 도구 더보기 > 개발자 도구 선택
  • 페이지 요소를 오른 클릭하고 검사를 선택
  • 키보드 단축키 Ctrl+Shift+I (Windows)나 Cmd+Opt+I (Mac)를 사용할 수 있습니다.

DevTools 더 알아보기

기기 모드

Device Mode 완전히 반응하는 모바일 우선 웹 경험을 만드세요.

Elements 패널

Elements Panel DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 반복하십시오.

Console 패널

Console Panel 개발 중 진단 정보를 남기고 페이지의 자바스크립트와 상호작용합니다.

Sources 패널

Sources Panel 브레이크 포인트를 사용해 자바스크립트를 디버깅하거나 Workspace를 로컬파일에 연결하여 DevTools를 코드 에디터로 사용하세요.

Network 패널

Network Panel

요청 관련 문제의 디버깅과 페이지 로딩 성능을 최적화하세요.

Performance 패널 (이전의 Timeline 패널)

Timeline Panel 사이트의 라이프사이클 동안 발생한 다양한 이벤트를 기록하고 탐색하여 페이지의 런타임 성능을 향상합니다.

Memory 패널 (이전의 Profiles 패널)

Profiles Panel 메모리 사용 행태를 작성하고, 누수를 탐색합니다.

Application 패널 (이전의 Resources 패널)

Application Panel IndexedDB와 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다.

Security 패널

Security Panel Mixed content 이슈, 인증서 문제 등을 디버깅합니다.

참여하기

DevTools(나 이 문서)에 대한 피드백이나 질문은 아래 채널들에서 할 수 있습니다.

Twitter

Mailing List

Stack Overflow

Slack

GitHub