TIL 10. 개발자 도구 - Network Panel

요니·2021년 10월 16일
0

Web

목록 보기
1/2
post-thumbnail

Network Panel 이란?

웹페이지를 구성하는 URL부터 해당 서버에서 통신하고 있는 모든 데이터들이 표시되어 웹페이지와 서버 사이에서의 데이터 흐름을 분석하고 문제 발생시 해결책을 찾을 수 있는 곳입니다.

Network Panel의 탭 종류와 기능들

상단 탭

  • All : 페이지에서 통신하고 있는 모든 목록

  • JS : 페이지에서 사용하고 있는 JS파일들의 목록

  • Img, Media, Font : 페이지에서 사용하고 있는 이미지, 동영상, 폰트들의 목록이며 동영상은 일반적으로 mp4 파일들이 많이 확인됩니다.

  • XHR(Xml(Extensible Markup Language) Http Request) : 브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용합니다. xor의 Name의 세부사항인 Headers와 Review를 통해 Request URL 정보, 통신이 정상적으로 연결되어 있는지, 호출과 응답이 제대로 되었는지 등을 확인할 수 있습니다.

하단 탭

  • Filmstrip : 상단 탭 아래에 위치한 그래프로 타임라인 형태로 어떤 데이터가 어떤 순서로 로드되었는지 표시되는 곳

  • Name : 리소스의 이름과 URL

  • Status : 웹서비스에서 작동 여부를 상태 코드 숫자로 나타내주는 곳으로 오류를 확인 할 수 있는 곳 (ex. 200 : 정상작동 / 304 : Not modified 등)

  • Type : 파일의 형식(.html / .js 등의 형식)을 볼 수 있는 곳

  • Initiator : 시작 지점을 의미하며, ‘(Initiator)에서 호출 됐다’는 의미

  • Size : 각 리소스들의 파일 사이즈

  • Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답하는데 까지의 걸린 시간

  • Waterfall : 타임라인의 세부 정보를 알려주는 곳

참고 링크

profile
내가 나여서 빛이나기 위해😊

0개의 댓글