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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

개요

Network 패널을 사용하면 다음을 수행할 수 있습니다.

네트워크 활동 검사에서 가장 일반적으로 사용되는 네트워크 패널 기능을 설명하는 안내 튜토리얼을 확인하세요.

네트워크 패널 열기

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

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

  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 헤더 및 응답을 검색하는 방법을 알아보려면 네트워크 헤더 및 응답 검색을 참고하세요.

로드 동작 변경

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

Network 패널을 사용하여 다음을 수행할 수 있습니다.

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

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