들어가기 전에

웹 개발을 하다 보면  Ajax와 같은 요청처리에 대해서 문제가 생길 수 있습니다.  

Ajax 통신에서 로직이 문제인지, 아니면 서버 쪽의 문제인지 등 궁금할 때가 많습니다.

이런 부분을 소스코드상으로는 디버깅을 할 수 없습니다. 

Ajax뿐만은 아닙니다.

네트워크 통신과정의 상황을 지켜보면서 디버깅하는 방법을 알아봅니다.

학습 목표

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

핵심 개념

• 크롬 개발자도구
  

학습하기

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

크롬 개발자도구는 여러 가지 기능을 제공합니다.

녹화기능을 통해서 HTML, CSS, JavaScript, image파일을 내려받는 상황을 알 수 있습니다.

흔히 겪는 404와 같은 응답 오류에 대해서 문제를 쉽게 찾을 수 있습니다.

얼마나 서버로부터 응답이 걸리는지도 알 수 있습니다.

즉 성능개선을 위해서 진단할 수 있는 도구 역할을 하는 것이죠. 

다양한 탭을 통해서 XHR, JS 등 통신 항목만 추려서 그 결과를 확인할 수 있으므로, 디버깅을 쉽게 할 수 있습니다.

또한, Name, status, type과 같은 항목도 내 맘대로 설정해서 노출할 수가 있습니다.

전체적으로 HTTP통신과정에서 생기는 문제는 여기서 대부분 실마리를 찾을 수 있을 겁니다. 

생각해보기

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

참고 자료