개발자도구 Network 살펴보기

요즘 웹 성능 최적화에 대해 공부하고 있다. 성능 최적화를 위해 개발자 도구에서 주로 사용되는 탭에는 Network, Performance, Lighthouse 등이 있다. Network탭은 기존에 개발하면서 자주 사용하던 기능이지만, 복습할 겸 오늘은 Network 탭에 대해 다시 정리해보려고 한다.

🙄Network 탭이란?

개발자도구의 네트워크 탭은 웹 브라우저와 서버 간의 네트워크 요청과 응답을 실시간으로 모니터링할 수 있는 탭이다. 웹 페이지가 로드되거나 사용자 상호작용으로 발생하는 모든 네트워크 활동(예: HTTP 요청, 파일 로드, 데이터 전송 등)을 상세히 확인할 수 있다.
네트워크 탭은 개발자가 페이지 성능, 네트워크 오류, API 디버깅 등 다양한 문제를 해결할 때 사용할 수 있어 웹 개발자에겐 매우매우 필수이다!!

✅ Network 탭 살펴보기

위는 우리가 잘 아는 크롬 개발자도구에 네트워크 탭이다. 네트워크 탭에서 각 영역과 기능에 대해 살펴보자.

1. Filter (필터)

• 필터는 Fetch/XHR, Doc, CSS, JS등 네트워크 요청을 유형별로 필터링한다. 특정 파일 형식이나 특정 요청 유형만 보고 싶다면 필터링을 해서 볼 수 있다.

  Fetch/XHR: API 요청(예: fetch, axios 등).
  Doc: HTML 문서.
  CSS: 스타일시트.
  JS: JavaScript 파일.
  Img: 이미지 파일.
  Font: 폰트 파일.
  Media: 비디오나 오디오 파일.
  Manifest: 웹 애플리케이션 매니페스트 파일.
  WS (WebSocket): WebSocket 연결.
  Other: 기타 유형 요청.

• 또한 특정 HTTP 메소드만 필터링해서 보고 싶다면 필터링 텍스트 박스에 입력해서 볼 수 있다.
  ex) HTTP Method 가 GET 인 인터페이스만 필터링 하고 싶다면
  

2. Preserve log (로그 유지)

• 기본적으로 새로고침을 하거나 페이지를 이동할 경우 네트워크 로그가 초기화된다. 이 옵션을 활성화하면 새로고침 및 페이지 이동 후에도 네트워크 요청 기록이 유지된다.

3. Disable cache (캐시 비활성화)

• 브라우저 캐시를 비활성화한다. 페이지를 새로고침할 때 항상 서버에서 최신 리소스를 로드하도록 한다.

4. Throttling (네트워크 속도 제한)

• 네트워크 속도를 시뮬레이션한다. 예를 들어, 느린 3G 환경에서의 성능 테스트를 위해 속도를 제한할 수 있다.

5. Request Overview

• 시간 축(타임라인)을 기준으로 네트워크 요청을 시각적으로 표시한다.

• 색상 막대는 각 요청의 진행 상태를 나타낸다.

  파란색: 네트워크 요청이 시작되어 데이터를 다운로드하는 시간.
  노란색: 브라우저가 응답을 처리하는 시간.
  녹색(없음): HTTP 응답을 기다리는 시간.

• 각 요청에 대한 소요 시간을 확인할 수 있다.

6. Big request rows

• 요청 행의 높이를 키워 요청 세부 정보를 더 쉽게 볼 수 있게 한다.

7. Group by frame (프레임별 그룹화)

• 여러 프레임(예: iframe 포함)이 있는 페이지에서 요청을 프레임별로 그룹화한다.

8. Screenshots (스크린샷)

• 네트워크 요청 타임라인에 따른 페이지 스크린샷을 표시한다. 성능 디버깅에 유용하다.

✅ Network 탭 컬럼들 살펴보기

아마 웹 개발자분들이라면 대부분 알거라고 생각하지만 간단하게만 살펴보자.

1. Name (이름)

• 요청된 리소스의 이름 또는 URL의 마지막 부분을 표시한다.
• 이름을 클릭하면 요청에 대한 자세한 정보를 확인할 수 있다.

2. Status (상태 코드)

• HTTP 상태 코드를 보여 준다.

3. Type (유형)

• 요청된 리소스의 유형을 표시한다. 브라우저가 MIME 타입을 기반으로 리소스를 분류한다.

  document: HTML 문서.
  script: JavaScript 파일.
  jpeg, png: 이미지 파일.
  fetch: API 요청(데이터 호출).

4. Initiator (요청자)

• 리소스를 로드하게 만든 소스 또는 파일을 나타낸다.
• 디버깅 시 어떤 코드가 요청을 발생시켰는지 파악하는 데 유용하다.

5. Size (크기)

• 다운로드된 데이터의 크기(바이트 단위)를 나타낸다.

6. Time (시간)

• 각 요청에 걸린 총 시간을 표시한다(밀리초 단위)

✅ Network 요청 상세보기

Headers (헤더)

• 요청(Request)과 응답(Response)에 대한 헤더 정보를 확인할 수 있다.
• General: 요청 URL, HTTP 메서드(GET, POST 등), 상태 코드(200, 404 등), 원격 주소 등 기본 정보를 표시한다.
• Response Headers (응답 헤더): 서버가 클라이언트에 반환한 응답 헤더를 보여준다.
• Request Headers (요청 헤더): 클라이언트가 서버로 전송한 요청 헤더를 표시한다.
  
  

Preview (미리보기)

• 서버에서 반환된 응답 데이터를 보기 쉽게 구조화해 보여준다.
• JSON, HTML, XML 등의 데이터가 계층적 구조로 표시된다.
• 주로 API 응답 데이터를 빠르게 확인할 때 사용한다.
  
  

Response (응답)

• 서버가 반환한 응답 데이터를 원시(raw) 형태로 보여준다.
• Preview와 달리 데이터를 가공하지 않고 그대로 출력한다.
• 데이터의 원본을 확인하거나 디버깅할 때 유용하다.
  
  

Initiator (요청자)

• 해당 요청이 어떤 코드나 파일로 인해 발생했는지를 보여준다.
• 어떤 부분에서 요청이 발생했는지 추적하거나 불필요한 요청을 제거할 때 유용하다.
  
  

Timing (타이밍)

• 요청과 응답에 걸린 시간 분포를 상세히 보여준다.
• 주요 항목:

  Queueing: 요청이 대기열에 머문 시간.
  DNS Lookup: DNS 조회 시간.
  Initial Connection: 서버와의 연결 설정 시간.
  Request Sent: 요청이 서버로 전송된 시간.
  Waiting (TTFB): 서버 응답을 기다린 시간(Time to First Byte).
  Content Download: 응답 데이터를 다운로드한 시간.

• 요청의 병목 구간을 확인하고 성능 최적화에 도움을 준다.
  
  
  
  

혹시라도 잘못된 내용이 있거나 질문사항 있으시면 댓글 남겨주세요! 어떤 댓글이든 달게 받겠습니다!