개발자도구 Network패널의 기능

웹페이지와 서버 사이에서 데이터 흐름을 볼 수 있다.

네트워크 패널을 열고 네이버 홈페이지를 새로고침 하면 이렇게 페이지를 로딩하는데 필요한 모든 리소스들이 호출되는 과정을 볼 수 있다

네트워크 탭을 통해 페이지 로딩 성능 테스트, api크롤링을 할 수 있다.

 

status

1. Informational responses (100–199)
2. Successful responses (200–299): 성공
3. Redirection messages (300–399): 우회 ex 요청한 리소스의 URI가 일시적으로 변경되었을때
4. Client error responses (400–499): 클라이언트에러 (404 찾을수없다, 403 허가가 안된다)
5. Server error responses (500–599)

preveiw

미리보기를 할 수 있다

XHR

파일 이름을 누르면 헤더 탭을 볼 수 있다

http통신의 결과를 알 수 있다.

어떤 요청으로 호출을 했고 응답이 제대로 왔는지 

잘못됐다면 어디서 잘못됐는지 판단할 수 있다.

 

preview에서는 어떻게 데이터를 주고받는지 알 수 있다.

 

프론트엔드와 백엔드 사이 소통에서 오류가 났다면

네트워크패널의 xhr파일들의 헤더랑 프리뷰를 살펴보면 된다.