디버깅 크롬 개발자 도구

• 들어가기 전에 웹 개발을 하다 보면 Ajax와 같은 요청처리에 대해서 문제가 생길 수 있습니다. Ajax 통신에서 로직이 문제인지, 아니면 서버 쪽의 문제인지 등 궁금할 때가 많습니다. 이런 부분을 소스코드상으로는 디버깅을 할 수 없습니다. Ajax뿐만은 아닙니다. 네트워크 통신과정의 상황을 지켜보면서 디버깅하는 방법을 알아봅니다.

---

학습 목표

1. 크롬 개발자도구의 networks 패널을 통해서 네트워크 상황을 이해하고 그 문제를 해결할 수 있다.

핵심 개념

• 크롬 개발자도구

학습하기

1. 크롬 개발자 도구의 네트워크 패널

크롬 개발자도구는 여러 가지 기능을 제공합니다. 녹화기능을 통해서 HTML,CSS,JavaScript,image 파일을 내려받는 상황을 알 수 있습니다.흔히 겪는 404와 같은 응답 오류에 대해서 문제를 쉽게 찾을 수 있습니다. 얼마나 서버로부터 응답이 걸리는지도 알 수 있습니다.즉 성능개선을 위해서 진단할 수 있는 도구 역할을 하는 것이죠.

다양한 탭을 통해서 XHR, JS 등 통신 항목만 추려서 그 결과를 확인할 수 있으므로, 디버깅을 쉽게 할 수 있습니다. 또한, Name, Status, Type과 같은 항목도 내 마대로 설정해서 노출할 수가 있습니다. 전체적으로 HTTP통신과정에서 생기는 문제는 여기서 대부분 실마리를 찾을 수 있을 겁니다.

생각해보기

1. 네트워크 패널에서 제공하는 기능 중에 'Capture screenshots'이라는 기능이 있습니다. 이 부분을 활성화하고 웹사이트를 다시 로딩해서 그 결과를 확인해보세요. 시간대별로 화면을 볼 수 있는 신기한 기능입니다.