개발자 도구 뜯어먹기 : Network

지난번 console 탭 관련 포스팅에서 실제 사용 예시 중

서버와의 통신 이후 받아온 데이터를 노출하는 방식으로 예시를 들었는데,

사실 통신과 관련돼서 더 많은 정보를 담고 있는 게 바로 오늘 알아볼 Network 탭이다.

 

---

Network는?

network라고 하는 단어는 일상에서도 굉장히 자주 사용되고, 이미 익숙한 단어라고 생각한다.

개발자 도구에서도 그 의미에 맞게 통신과 관련된 내용을 확인할 때 보는 탭이다.

 

최근의 웹은 더욱더 복잡해지면서 사용자와의 상호작용이 점점 많아지고,

그에 따라 복잡한 통신도 많아지게 되는데, 그 과정에서 발생하는 문제들이 많아질수록

우리는 이 탭을 더욱더 자주 드나들게 될 것이다.

 

해당 탭을 살펴보면 어떤 파일들을 받았는지, 그 파일들에 대한 상태, 타입에 대한 것도 알 수 있고,

전송받는데 얼마나 걸렸는지, 크기는 얼마나 되는지도 알 수 있다.

그야말로 통신과 관련된 A - Z까지 알 수 있게 해 놓은 곳이라고 볼 수 있겠다.

 

728x90

 

How to use it

페이지가 로드되면 해당 페이지에서 통신을 통해 받게 되는 다양한 데이터를 볼 수 있는데

이 중 하나의 파일을 선택하면 위의 사진과 같은 창을 확인할 수 있다.

 

그중 Headers 부분을 살펴보면 먼저 General 영역이 있는데 이 부분은 통신의 일반적인 정보를 담은 부분이다.

통신 요청 주소, 요청 방법, 통신 상태 코드 등 통신이 이루어지는데 기본적인 정보가 있다.

그중 Status Code가 있는데 통신의 상태를 나타내는 숫자라고 보면 된다.

 

해당 상태 코드만 보더라도 해당 통신이 어떤 상태인지를 알 수 있는데,

100번대~ 500번대까지 있고, 주로 200번대, 400번대, 500번대를 종종 보게 된다.

200번대는 통신이 성공했다는 의미가 담겨있는 코드들의 집합이고,

400번대와 500번대는 통신 과정에서 에러가 발생했다는 의미가 담겨있는 집합이다.

 

400번대는 주로 클라이언트의 문제일 확률이 높고,

500번대는 주로 서버의 문제일 확률이 높아서

협업 과정에서 통신 에러가 발생할 경우 이 상태 코드를 보고 싸움을 준비하면 되겠다.

 

Headers 옆에 위치하고 있는 부분도 살펴보면

Payload는 클라이언트가 서버와 통신을 할 때 서버로 넘겨주는 데이터를 확인할 수 있는 영역이고,

Preview와 Response는 통신에 따른 결괏값을 보여주는 영역인데, 형식에 차이가 있다.

 

Preview는 객체 형태로 파싱 되어 보기 편하게 되어있고,

Response는 실제 데이터 통신 이후 받아온 결과를 그대로 보여주는데

주로 json 형태로 데이터를 받기 때문에 나열된 문자 구조를 보여주는 경우가 많다.

 

---

포스팅 작성에 참고한 감사한 글들

▶ 혼공 블로그 : HTTP 상태코드 전체 요약