네트워크 패널: 네트워크 부하 및 리소스 분석

Dale St. Marthe
Dale St. Marthe
LinkedIn

네트워크 패널을 사용하여 페이지 로드를 분석하고 네트워크 리소스를 검사합니다.

개요

네트워크 패널을 사용하면 다음 작업을 할 수 있습니다.

가장 일반적으로 사용되는 네트워크 패널 기능을 살펴보는 가이드 튜토리얼은 네트워크 활동 검사를 참고하세요.

네트워크 패널 열기

네트워크 패널을 열려면 DevTools를 열고 상단의 작업 모음에 있는 네트워크를 클릭합니다.

또는 명령어 메뉴 를 통해 네트워크 패널을 열려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. 다음을 눌러 명령어 메뉴 를 엽니다.
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Control+Shift+P 명령 메뉴
  5. Network를 입력하기 시작하고 네트워크 패널 표시를 선택한 후 Enter를 누릅니다.

네트워크 활동 기록

DevTools를 열면 DevTools가 열려 있는 한 네트워크 요청이 네트워크 패널에 자동으로 기록됩니다.

기록 외에도 다음 작업을 할 수 있습니다.

네트워크 요청 검사

모든 네트워크 요청은 패널 중앙의 요청 표에 로깅됩니다.

기본적으로 표시되는 열과 추가할 수 있는 열에 관한 자세한 내용은 요청 로그 보기를 참고하세요.

요청 이름을 클릭하면 다음을 비롯한 요청에 관한 추가 정보가 포함된 탭이 표시됩니다.

  • 헤더: 선택한 요청의 HTTP 헤더입니다.
  • 페이로드: 요청의 쿼리 문자열 매개변수 및 양식 데이터입니다.
  • 미리보기: HTML의 기본 렌더링입니다.
  • 응답: 요청의 HTML 소스 코드입니다.
  • 이니시에이터: 요청을 발생시킨 항목입니다.
  • 타이밍: 선택한 요청의 네트워크 활동 분석입니다.
  • 쿠키: 요청 및 응답의 쿠키입니다.
  • 기기 바인딩 세션: 활성 기기 바인딩 세션의 지연 및 새로고침 상태입니다.

네트워크 요청 필터링 및 정렬

네트워크 패널은 요청 표에서 요청을 정렬하는 두 가지 방법을 제공합니다.

다음은 요청 표에서 요청을 필터링하는 몇 가지 방법입니다.

특정 문자열 또는 정규 표현식에 관해 모든 리소스의 HTTP 헤더 및 응답을 검색하는 방법을 알아보려면 네트워크 헤더 및 응답 검색을 참고하세요.

로드 동작 변경

네트워크 패널에서 로드 동작을 변경하여 페이지의 사용자 환경을 테스트합니다.

네트워크 패널을 사용하면 다음 작업을 할 수 있습니다.

네트워크 요청 데이터 저장 및 내보내기

네트워크 요청 데이터를 저장하고 내보내려면 다음을 참고하세요.