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

 

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다.

 

이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다.

Doc

 

HTML 문서에 대한 리소스를 확인할 수 있습니다.

SSR를 정상적으로 수행 중인지 확인할 때 용이합니다.

JS

 

JavaScript에 대한 리소스를 확인할 수 있습니다.

 

 

Fetch/XHR

JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다.

fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다.

 

CSS

 

CSS에 대한 리소스를 확인할 수 있습니다.

Font

 

폰트 파일에 대한 리소스를 확인할 수 있습니다.

웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다.

Img

 

이미지 리소스를 확인할 수 있습니다.

이미지 사이즈, 캐싱 설정 등 확인할 때 유용합니다.

Media

 

비디오와 오디오 같은 리소스를 확인할 수 있습니다.

WS

웹소켓을 확인할 수 있습니다.

웹소켓 통신 데이터를 해당 로그 클릭 후 확인할 수 있습니다.

 

마치며

네트워크 디버깅은 아래 포스트에서 볼 수 있습니다.

https://the-next-web-research-lab.tistory.com/154

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