Chrome DevTools (크롬 개발자 도구)

출처: https://developers.google.com/web/tools/chrome-devtools/

Ctrl + Shift + I 로 실행

기기 모드

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

• 기기 모드
• 반응형 및 기기별 뷰포트 테스트
• 센서 에뮬레이션: Geolocation & Accelerometer

Elements 패널

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

• 페이지 검사 및 조정
• 스타일 수정
• DOM 수정
• 애니메이션 검사

Console 패널

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

• Console 사용하기
• 커맨드 라인으로 상호작용하기

Sources 패널

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

• 자바스크립트 디버깅 시작하기
• 브레이크 포인트를 사용한 디버깅
• DevTools Workspace로 지속성 설정
• 모든 페이지에서 코드 스니펫 실행

Network 패널

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

• 시작하기
• 네트워크 이슈 가이드
• Network 패널 참조

Performance 패널 (이전의 Timeline 패널)

Note: Chrome 57부터 Timeline 패널이 Performance 패널로 이름이 바뀌었습니다.

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

• 성능 보는 법
• 런타임 성능 분석
• 강제 동기 레이아웃 분석

Memory 패널 (이전의 Profiles 패널)

Note: Chrome 57부터 Profile 패널이 Memory 패널로 이름이 바뀌었습니다.

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

• 메모리 문제 해결
• 자바스크립트 CPU 프로파일러

Application 패널 (이전의 Resources 패널)

Note: Chrome 52부터 Resources 패널이 Application 패널로 이름이 바뀌었습니다.

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

• 프로그레시브 웹 앱 디버깅
• 스토리지, 데이터베이스, 캐시 관리 및 검사
• 쿠키 삭제 및 검사
• 리소스 검사

Security 패널

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

• 보안 이슈 이해하기