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

Dale St. Marthe
Dale St. Marthe

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

개요

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

가장 자주 사용되는 네트워크 패널 기능을 살펴보는 안내 ���토리얼은 네트워크 활동 검사를 참고하세요.

Network 패널 열기

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

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

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

네트워크 활동 기록

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

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

네트워크 요청 검사

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

기본적으로 표시되는 열과 추가할 수 있는 열에 대해 자세히 알아보려면 요청 로그 보기를 참고하세요.

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

  • 헤더: 선택한 리소스의 HTTP 헤더입니다.
  • 페이로드: 요청의 쿼리 문자열 매개변수 및 양식 데이터입니다.
  • 미리보기: HTML의 기본 렌더링입니다.
  • 응답: 선택한 리소스의 HTML 소스 코드입니다.
  • 이니시에이터: 리소스가 요청된 원인입니다.
  • 타임라인: 선택한 리소스의 네트워크 활동 분석입니다.
  • 쿠키: 요청 및 응답의 쿠키입니다.

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

네트워크 패널을 사용하면 요청 표에서 요청을 정렬하는 두 가지 방법이 있습니다.

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

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

로드 동작 변경

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

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

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

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