[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(3. Ajax - FE)_2. 디버깅 - 크롬 개발자 도구

크롬 개발자도구의 networks 패널을 통해서 네트워크 상황을 이해하고 문제를 해결해보자!

 

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

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

 

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

 

 

 

NAVER 메인 화면을 개발자 도구로 뜯어보기

 

 

#네이버에 접속했을 때 네트워크를 통해 주고 받은 파일들을 보여주는 네트워크 패널

 

 

 

 

 

 

#파일들을 가져오는데 걸린 시간과 받은 순서 확인

 

 

 

 

 

#HTTP 응답 코드로 각 js파일 별 상태를 확인

200: 요청이 성공했음 / 404: 요청한 페이지를 찾을 수 없음 등등

 

 

 

 

 

#AJAX통신으로 실시간 검색어 순위를 가져오는 것을 확인

(XHR은 AJAX 요청을 생성하는 JavaScript API)

 

 

 

 

 

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/16770/

[LECTURE] 2) 디버깅 - 크롬 개발자 도구 : edwith