[개발자도구] 네트워크 디버깅

개발자도구를 통해 페이지에서 발생하는 네트워크 디버깅을 위해서 녹화버튼을 실행한 뒤 새로고침합니다.

모든 네트워크 활동이 네트워크 로그에 기록됩니다.

 

 

네트워크 로그

네트워크 로그의 각 행은 리소스를 표시합니다.

기본적으로 시간순서로 나열됩니다.

 

 

특정 시점 확인

네트워크 로그에서 특정 시점을 선택해서 리소스를 폭포수 모델로 확인할 수 있습니다.

 

 

 

리소스 데이터

 

리소스를 선택하면 데이터를 확인할 수 있으며 항목별로 의미는 다음과 같습니다.

Headers
HTTP 요청/응답 헤더를 확인할 수 있습니다.

Payload
HTTP POST/PUT 메소드일 때 HTTP 요청 Body에 담아 보낼 데이터를 확인할 수 있습니다.

Preview
HTTP 응답 Body의 데이터를 정리해서 확인할 수 있습니다.

Response
HTTP 응답 Body의 원본 데이터를 확인할 수 있습니다.

Initiator
HTTP 요청을 발생 시킨 소스 코드의 위치를 확인할 수 있습니다.

Timing
HTTP 요청 시작, 대기 시간, HTTP 응답 시간 등 타이밍을 확인할 수 있습니다.

Cookies
HTTP 쿠키 데이터를 확인할 수 있습니다.

 

네트워크 로그 삭제

네트워크 로그는 삭제 버튼 클릭 후 삭제됩니다.

 

 

 

마치며

네트워크 필터에 대한 설명은 아래 포스트에서 볼 수 있습니다.

[개발자도구] 네트워크 필터 의미 | js css fetch xhr ws (tistory.com)

[개발자도구] 네트워크 필터 의미 | js css fetch xhr ws