[Chrome] 개발자 도구 활용법

🔎 개발자 도구

웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.

크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다.

 

🧩 주요 패널

• Elements
  • html/css 상태 확인
• Console
  • JavaScript 코드 실행 및 디버깅
  • 로그 확인
  • 오류 메시지 표시
• Sources
  • 페이지 소스 검사 및 디버깅
  • break point 지정 및 변수 모니터링
• Network
  • 브라우저에서 발생하는 통신 상태
  • 네트워크 모니터링
  • 네트워크 요청 상세 정보 확인
• Performance
  • 성능 측정
  • 페이지 로드 및 상호작용 성능 분석
  • 타임라인 기록
• Application
  • 저장소, 쿠키, 캐시 등을 관리
• Security
  • 페이지 보안 정보 확인 및 분석
  • SSL/TLS 인증서 정보
  • Mixed content 식별

 

개인적으로는 Elements, Console, Network를 아래와 같은 용도로 가장 많이 쓴다.

Elements는 html/css를 확인하거나 변경해보고 싶을 때 주로 쓴다. 예를 들어 글씨 크기를 바꾸고 싶을 때, 코드에서 변경하고 확인하고 또 변경하고 확인하기 번거로우니 개발자 도구를 활용해 글씨 크기를 조정해 보고 원하는 크기로 코드를 변경한다.

Console은 주로 디버깅을 위해 콘솔에 출력하는 용도로 쓴다.

나는 프론트엔드 개발을 하기 때문에 Network 탭에서 요청이 제대로 갔는지 확인한다. 내가 보낸 요청의 Headers, Payload, Response 등을 확인할 수 있다.

 

그 밖에도 화면 캡처, 현재 위치 변경 등 다양하게 활용할 수 있으니 개발할 때 참고하자.