개발자 도구 네트워크 탭 톺아보기

GDGoC Web/App mini seminar #2

개발을 하다 보면
네트워크 창을 보는 것은 정말로 필수적인 일이 될 텐데요

네트워크 탭에 대해서 한 번이라도 제대로 공부해 본 경험이 있나요?🤔

아마 대부분은
에러가 났을 때, 혹은 무언가가 제대로 안 될 때
그때그때 필요한 정보만 찾아보는 수준에서
네트워크 탭을 사용해 오지 않았을까 싶어요.

(사실 제가 그렇게 사용을 해왔기에...)

---

그래서 개발자 도구, 그중에서 네트워크 탭에 대해서 톺아보고자 합니다!

하나하나씩 뜯어보면서 조금 더 확실하게 알고
개발자 도구를 사용하는 데 도움이 되었으면 합니다.

---

본격적으로 네트워크 탭을 보기 전에 우선 개발자 도구의 역사부터 간단하게 알아볼까요?

1. 개발자 도구는 왜/언제 생겼나?

웹과 관련된 기술이 발전함에 따라 웹의 구조가 점점 복잡해지면서
브라우저는 단순히 “페이지를 보여주는 도구”를 넘어서

• HTML이 어떻게 렌더링되는지
• 어떤 CSS 규칙들이 적용됐는지
• JavaScript는 언제, 어떤 순서로 실행되는지
• 서버와는 어떤 요청·응답을 주고받는지

이 모든 걸 개발자가 직접 확인하고 디버깅할 수 있는 도구가 필요해졌습니다.

초기에는
JavaScript 실행을 확인하는 디버거,
DOM 구조를 눈으로 볼 수 있는 Inspector 같은
단일 기능 위주의 도구들이 먼저 등장했고

이후 Firebug 같은 도구가 등장하면서

HTML, CSS, JavaScript, 네트워크 요청까지
한 곳에서 모두 확인할 수 있는 형태가 만들어졌습니다.

그리고 그 흐름이 이어져서
지금 우리가 쓰고 있는
Chrome DevTools로 발전하게 된 거랍니다!

더 자세한 개발자 도구의 역사가 궁금하시다면 여기를 참고해주세요!

2. 그렇다면 네트워크는 뭔데?

네트워크란 브라우저와 서버가 요청(Request)과 응답(Response)을 주고받는 과정의 표현

따라서 네트워크 탭은,

우리가 작성한 코드가 실행되면서
실제로 어떤 요청이 서버로 보내졌고,
그에 대해 서버가 어떤 응답을 돌려줬는지를
그대로 기록해 보여주는 곳

이라고 할 수 있겠네요!

따라서 네트워크 탭에서는
브라우저와 서버 사이에서 실제로 오간 데이터를 확인할 수 있습니다.

---

3. 네트워크 탭의 전반적인 구성 소개

네트워크 탭 상단

Filmstrip 타임라인

타임라인 형태로 어떠한 데이터 및 요청이 어떤 순서로 로드 됐는지 표시되는 곳입니다!

🔴 / 네트워크 로그 기록 중지

빨간 동그라미 모양의 버튼은 현재 네트워크들이 기록되고 있다는 뜻이며, 기록되는 동안에는 모든 Network 요소들을 보여줍니다. 클릭 시 기록을 멈출 수 있습니다!

🚫 / 네트워크 로그 지우기

바로 오른쪽에 위치한 🚫을 클릭하면 기록된 모든 요소를 지울 수 있습니다.

Filter / 필터

깔때기 모양의 필터 아이콘은 네트워크 소스를 타입별로 볼 수 있도록 도와줍니다!

[1] 필터를 켰을 때

전체,Fetch/XHR, 문서, CSS, JS, 글꼴 ... 과 같은 카테고리가 나타나는 것을 확인할 수 있으며, 해당 버튼을 누르면 카테고리에 해당하는 네트워크 응답 및 요청만 확인할 수 있습니다

[2] 필터를 껐을 때

방금 나타났던 카테고리 요소들이 사라지고 전체 네트워크 요청과 응답이 나타나는 것을 확인할 수 있습니다

뿐만 아니라,
사용자가 별도의 Filtering 방식을 사용할 수도 있다는 사실 알고 계셨나요?!

(전 몰랐습니다...)

예를 들어 HTTP Method가 GET인 인터페이스만 Filtering 하고 싶다면
필터를 켜고 입력란에 method:GET 이라고 입력하면
해당하는 네트워크 통신 결과만 불러오는 것을 확인할 수 있습니다!

이외에도 method와 같이 Filter 텍스트 박스에 입력할 수 있는 keyword들은 다음이 있으니 활용해보시면 좋을 것 같습니다☺️

• domain
• has-response-header
• is
• larger-than
• method
• mime-type
• scheme
• set-cookie-name
• set-cookie-value
• set-cookie-domain
• status-code

Search 🔍

검색하는 기능으로 네트워크 요청 안의 URL, Header, Response 값까지 전부 대상으로 검색할 수 있어

특정 API 호출이 있었는지, 응답에 원하는 값이 들어왔는지와 같은 정보를 빠르게 찾을 때 유용합니다!

로그 보존 / Preserve log

페이지가 이동되어도 로그가 사라지지 않도록 합니다

캐시 사용 중지 / Disable cache

브라우저의 캐시를 비활성화 합니다

제한 없음 / No throttling

빠른 4G, 느린 4G, 3G, Offline 등 다양한 환경에서의 사용경험을 테스트할 수 있도록 해주는 도구이며, 추가... 버튼을 눌러서 다음 사진과 같이 원하는대로 네트워크 환경을 커스텀하여 테스트할 수도 있습니다!

숨겨진 컬럼들 활용하기

네트워크 창에서 숨겨져 있는 컬럼들이 있다는 거 알고 계셨나요?

이렇게 네트워크 탭을 켠 채로 우클릭을 하면, 기본적으로 보이게 설정되어 있는 요소들 이외에도 더 많은 정보를 추가하여 확인할 수 있습니다!

자주 확인할 정보들로 커스텀을 해두면 좋겠죠?!

그중에서 폭포를 클릭하면 위 사진과 같이 타임라인에 대한 정보가 뜨는 것을 확인할 수 있습니다.

이 타임라인을 통해서는 request가 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보가 나타나있습니다!

확인하고 싶은 요청의 폭포 타임라인을 클릭하면 위 사진과 같이 구체적인 정보가 나타나는 것을 확인할 수 있습니다.

타임라인 상세 정보

• n초에 대기열에 추가됨 : 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
• n초에 시작함 : 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
• 대기열: 구문을 분석한 시점에서 큐에 적재되어 있는 시간
• 중단됨 : 큐에서 request를 보내는 동안 정지되어 있는 시간
• 프록시 협상 : 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
• 요청 전송됨 : request를 보내는데 걸리는 시간
• 서버 응답을 기다리는 중 : response의 첫번째 바이트가 도달하는데까지 걸리는 시간 (TTFB: Time To First Byte)
• 콘텐츠 다운로드 : content가 다운로드가 되는데 까지 기다린 시간
• 설명 : 총 소요되는 시간

요청 하나하나씩 개별적으로, 또 시각적으로 파악하고 싶을 때 유용하게 사용할 수 있을 것 같습니다!

요청 세부 내용

Headers
요청 URL, Method, Status Code, Request/Response Header 확인
→ 인증, 캐시, API 주소 확인 시 확인하는 부분

Preview
응답 데이터를 보기 좋게 구조화해서 보여줌
→ 서버에서 어떤 응답이 오고 있는지 확인하는 부분

Response
서버가 준 원본 데이터
→ 실제 응답 값 검증할 때 사용

Cookies
요청/응답에 포함된 쿠키 정보
→ 로그인, 세션 문제 관련 검증

Timing
요청 전체 흐름을 시간 단위로 분해
→ 느린 원인 판단

---

네트워크 하단부

DOMContentLoaded

HTML을 전부 받아서 파싱하고 DOM Tree를 완성했을 때 발생하는 이벤트

따라서 폭포에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간이라고 할 수 있습니다!

Load

반면 Load는
DOM Tree뿐만 아니라,

이미지, CSS, 폰트, iframe 같은 외부 리소스까지

페이지에 필요한 모든 리소스가 전부 로드된 시점을 의미한다고 하네요

즉, 폭포에서 빨간색 선으로 표시가 되는 부분으로, DOM Tree 구조를 포함하여, 모든 리소스가 화면에 로드되는 시간을 의미합니다!

---

DOMContentLoaded와 Load, 이 두 이벤트는 사용자가 체감하는 속도와 굉장히 밀접하게 연결되어 있습니다.

따라서 사용자 경험을 판단하는데 가장 기본이 되는 지표로 프론트엔드 개발자에게 중요한 지표라고 생각할 수 있을 것 같습니다!

---

이미 알고 계셨던 부분도 많으실테지만
어렴풋이.. 혹은 느낌적으로만 알고 있던
그런 간지러운 부분들이 이 글을 통해 조금이나마 해소되었으면 좋겠습니다!

사실 GDGoC Web/App Part CodeLAB #4 을 진행하면서 캐싱 전략에 대한 실습의 해당 결과를 네트워크 창으로 확인하는데

내가 지금 잘 보고 있는게 맞는지 확신이 들지 않았어요

네트워크 탭을 확인하여 캐시 된 데이터들이 각 캐싱 전략에 맞게 동작하는지 확인 했어야하는데 어디를 봐야하는지 잘 모르겠더라구요

그래서 더욱 이 주제 다뤄 저도 확실하게 공부해보고 싶었습니다!

그치만 이제는 압니다... 이 곳에 캐시에 관한 정보가 담겨있다는것을...

여기서 크기가 (ServiceWorker)로 표시되는 리소스들은 서버가 아니라 캐시에서 내려온 거고, 304 응답은 서버에 확인은 했지만 변경이 없어서 기존 캐시를 그대로 사용했다는 의미!
(그래서 304 응답으로 온거였구나....)

네트워크 창을 포함하여 크롬 개발자 도구는 계속해서 업데이트되기 때문에
[공식 문서]를 통해 앞으로도 같이 공부해 나가면 좋을 것 같습니다~!