크롬 네트워크 탭 - keulom neteuwokeu taeb

지난 4월 파견 중에

홈페이지를 수정할 일이 생겼다.

해킹에 대응하기 위한 업무였는데,

개발자도구를 이용해서 일부는 확인할 수 있다고 들어서

Sources / Network 탭을 눌러서 

해당 현상과 관련된 부분을 확인해보려고 하니 해당 화면에 아무것도 뜨지 않았던것.!

좌측에 소스코드에도 아무것도 없고

Network 탭에서도 마찬가지였다. 

이럴 때에는 단순하게

새로고침 ( F5 ) 하면 해결이 된다.

PC Web을 개발하던, Mobile Web을 개발하던 반드시 Network로 서버와 인터페이스 하여 데이터를 주고 받는 업무가 발생한다. 이때 편리한 Debugging을 할 수 있는 Chrome 개발자 도구의 [Network] 탭을 살펴보도록 하자.

Chrome 개발자 도구는 이전 포스트에서 언급한 바와 같이 [F12] Key나 마우스 바로가기 메뉴의 [요소검사]를 선택하면 불러올 수 있다. 그럼 [Network] 탭의 구성을 살펴보자.

위 화면은 Naver에서 뉴스 한 건을 조회했을 때의 [Network] 탭을 Capture한 모습이다. 해당 페이지를 Loading 하면서 발생한 Network 요소들을 모두 Recording 하여 보여준다. 개발자 도구의 [Network] 탭에 접근한 경우가 아니라면 Chrome은 Network 요소를 Recording 하지 않는다. 반드시 개발자 도구의 [Network] 탭을 열고 있는 상태에서만 Recording 하게 된다. 따라서 해당 탭을 열더라도 페이지를 한 번 더 새로고침해야만 Recording 된 내용을 볼 수 있다.

도구상자의 가장 앞에 위치하는  

 버튼은 Recording을 할지 말지 선택하는 버튼이다. 해당 버튼이 빨간색이라면 Recording 상태이며, 회색이라면 현재를 Recording 하고 있지 않은 상태이다. 

그 옆에 있는  

 버튼은 누가 봐도, 현재 Recording 된 내용을 삭제하는 버튼이다. 해당 버튼을 클릭하면 현재 창에 있는 내용들이 모두 지워진다.

그 다음 

 버튼은 각종 Filter 버튼들을 보여줄지 말지 선택하는 버튼이다. [Network] 탭에서는 각종 Filter들을 제공하여 편리하게 원하는 부분만 볼 수 있도록 해주지만... 결국 자주 보게 되는 부분은 XHR 밖에 없는 것 같다. 여튼 Filter 버튼을 Enable 한 모습은 아래와 같다.

기본적으로 All 이 선택되어 있고, 보고 싶은 Content Type을 선택할 수 있게 되어 있으며, 맨 앞 텍스트 박스에 값을 입력하여서도 Filtering 할 수 있다. 예를 들어 HTTP Method 가 POST 인 인터페이스만 Filtering 해보고 싶다면 method:POST 라고 입력하면 Filtering 된다. Filter 텍스트 박스에 입력할 수 있는 Keyword 들은 아래를 참고한다.

-. domain

-. has-response-header

-. is

-. larger-than

-. method

-. mime-type

-. scheme

-. set-cookie-name

-. set-cookie-value

-. set-cookie-domain

-. status-code

대강 의미가 명확한 용어들이라 구체적인 설명은 생략하며 위의 예제와 같이 keyword:value 형식으로 Filtering 할 수 있다.

Filtering 버튼 중 자주 사용하게 되는 XHR 버튼을 한 번 클릭해보면 Filtering 되어 아래와 같은 데이터가 표시된다. 

XHR 인터페이스만 Filtering 한 것이며, 해당 인터페이스의 Method나 HTTP Response code, Content-Type, 또 Capture에는 잘렸지만 Elapse time 등도 표시되어 Debugging에 편리하게 사용할 수 있다. 그럼 위 3개의 데이터 중 list.json 을 한 번 클릭해보면 아래 탭의 내용이 변경된다.

5개 탭이 있으며, 위 그림은 Headers 탭의 내용이다. Headers 탭에서는 URL, Method, Status Code 등의 정보와 Response, Request Header 및 서버로 송신한 내용을 볼 수 있다. Client 화면 개발 시 서버와 데이터가 잘 맞지 않는다면 서버로 보낸 최종 데이터를 확인할 수 있는 부분이기에 개발 시 상당히 많이 활용하게 되는 내용이다.

그 옆에 있는 Preview 탭은 서버에서 수신한 데이터를 예쁘게 Parsing 하여 보여주고, 그 옆의 Response 탭은 Parsing 하지 않고 날 것으로 보여준다. 두 탭 모두 각자 쓸모가 있으며 예제는 아래와 같다.

[Preview] 탭

[Response] 탭

당연히 보기에는 Parsing 한 형태인 Preview 탭이 보기 좋지만, 쭉 긁어서 데이터를 재활용한다거나 넘어온 날 것 그대로의 데이터를 봐야할 때 (뭐 간단한 예로 서버 오류로 올바른 XML, JSON 데이터가 넘어오지 않았을 경우) 유용하게 사용할 수 있다.

[Cookie] 탭에서는 페이지에서 사용한 Request / Response Cookie 정보를 조회할 수 있으며 Timing 은 현재 Application의 Performance 를 점검해 볼 수 있다. Timing 에 대한 내용은 이야기가 제법 길어질 수 있으므로 별도로 포스팅할 생각이다.

이야기가 어쩌다가... 이렇게 두서 없이 빠졌지만 다시 [Network] 탭의 도구상자를 살펴보면 아직 두 개의 버튼이 남았다. 

 옆의 두 개의 버튼이 남았지만, 해당 버튼들도 결국은 Timing 과 관련된 내용이므로 나중에 다루기로 한다.

[Network] 탭 데이터를 표시하는 Header 정보는 기본적으로 아래와 같이 구성되며, Header를 클릭하면 Header 기준으로 정방향/역방향 Sort하여 데이터를 볼 수 있다.

웹 개발 공부하면서 개발자도구는 디폴트로 열어놓던 창인데 Elements, Console, Application 탭을 주로 사용했었다. 이번 팀 미션에서는 Network 탭을 주제로 학습해서 발표하는 미션이라 좋은 기회였던 것 같다.

팀 프로젝트를 진행할 때 프론트엔드에서 백엔드로 API호출하는 부분이 많은데 Network 패널을 이용해서 원활하게 통신이 되고 있는지, 문제되고 있는 부분은 어딘지를 확인하는데 유용하게 쓰인다니깐 앞으로 더 잘 숙지해서 팀 프로젝트 할 때 잘 활용해봐야겠다.

GP Lee

Follow

Aug 28, 2020

·

6 min read

·

Member-only