크롬 JAVASCRIPT 디버깅하는 방법 – Network 편

Resource탭은 해당 페이지가 어떤 리소스들로 구성되어 있는지 나타내주는 것.

길게 설명할 게 없어서 Network 탭으로 넘어갈게요.

 

웹브라우저와 서버사이에서의 데이터 흐름을 일목요연하게 파악하고 분석할 수 있도록 도와주는 툴이다.

Status : 서버가 웹 페이지를 서비스할 때의 결과를 나타내주는 것

   (ex 200 : 정상작동

        304 : 브라우저가 이미 서버쪽에 접근을 한 적이 있다는 의미. 이미 서버에서 내     려받은 파일이 있기 때문에 다시 서버가 클리이언트에게 파일을 제공해주     지 않아도 됨을 의미한다

   )

Type : 클라이언트가 서버에 요청한 데이타 타입이 무엇인지 나타내주는 것

Time : 요청 -> 응답까지의 시간

Timeline : 각각의 리소스가 동시에 로딩되는 것이 아니기 때문에, 그 순서와 로딩시간을 알려주는것. 어떤 파일 때문에 다른 파일이 지연되고 있는지 등에 대한 파악이 가능해진다.

Headers : 웹 브라우저가 서버측에게 요청하기 위해 작성한 정보지 같은 것

Request Header(클라이언트가 작성하는 명세서)

Response Header(서버가 클라이언트에게 작성하는 명세서)

Preview : 서버측에서 제공한 소스를 볼 수 있다.

Response : 서버측에서 제공한 데이터를 볼 수 있다.