담백한 웹 개발 이야기

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다. 이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다. Doc HTML 문서에 대한 리소스를 확인할 수 있습니다. SSR를 정상적으로 수행 중인지 확인할 때 용이합니다. JS JavaScript에 대한 리소스를 확인할 수 있습니다. Fetch/XHR JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다. fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다. CSS CSS에 대한 리소스를 확인할 수 있습니다. Font 폰트 파일에 대한 리소스를 확인할 수 있습니다. 웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다. Img 이미지 리소스를 확인할 수 있습니다. 이미지 사이즈..

개발자도구를 통해 페이지에서 발생하는 네트워크 디버깅을 위해서 녹화버튼을 실행한 뒤 새로고침합니다. 모든 네트워크 활동이 네트워크 로그에 기록됩니다. 네트워크 로그 네트워크 로그의 각 행은 리소스를 표시합니다. 기본적으로 시간순서로 나열됩니다. 특정 시점 확인 네트워크 로그에서 특정 시점을 선택해서 리소스를 폭포수 모델로 확인할 수 있습니다. 리소스 데이터 리소스를 선택하면 데이터를 확인할 수 있으며 항목별로 의미는 다음과 같습니다. Headers HTTP 요청/응답 헤더를 확인할 수 있습니다. Payload HTTP POST/PUT 메소드일 때 HTTP 요청 Body에 담아 보낼 데이터를 확인할 수 있습니다. Preview HTTP 응답 Body의 데이터를 정리해서 확인할 수 있습니다. Response..