Dale St. Marthe
Network 패널을 사용하여 페이지 로드를 분석하고 네트워크 리소스를 검사합니다.
개요
네트워크 패널을 사용하면 다음 작업을 할 수 있습니다.
- 네트워크 활동 기록
- 네트워크 요청 검사
- 네트워크 요청 필터링 및 정렬
- 검색 네트워크 헤더 및 응답
- 로드 동작 변경
- 네트워크 요청 차단하기
- 네트워크 조건 변경하기
prefetch추측 규칙 디버깅- HTTP 응답 헤더 재정의
- 와일드 카드 문자를 사용하여 여러 URL의 헤더를 재정의합니다.
- 네트워크 요청 데이터 저장 및 내보내기
가장 자주 사용되는 네트워크 패널 기능을 살펴보는 안내 튜토리얼은 네트워크 활동 검사를 참고하세요.
Network 패널 열기
네트워크 패널을 열려면 DevTools를 열고 상단의 작업 모음에 있는 네트워크를 클릭합니다.
또는 명령어 메뉴를 통해 네트워크 패널을 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 다음을 눌러 명령어 메뉴를 엽니다.
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
Network를 입력하고 네트워크 패널 표시를 선택한 다음 Enter 키를 누릅니다.
네트워크 활동 기록
DevTools를 열면 DevTools가 열려 있는 동안 Network 패널에 네트워크 요청이 자동으로 기록됩니다.
녹음 외에도 다음 작업을 할 수 있습니다.
네트워크 요청 검사
모든 네트워크 요청은 패널 중앙의 요청 표에 로깅됩니다.
기본적으로 표시되는 열과 추가할 수 있는 열에 대해 자세히 알아보려면 요청 로그 보기를 참고하세요.
요청 이름을 클릭하면 다음을 비롯하여 요청에 관한 추가 정보가 포함된 탭이 표시됩니다.
- 헤더: 선택한 리소스의 HTTP 헤더입니다.
- 페이로드: 요청의 쿼리 문자열 매개변수 및 양식 데이터입니다.
- 미리보기: HTML의 기본 렌더링입니다.
- 응답: 선택한 리소스의 HTML 소스 코드입니다.
- 이니시에이터: 리소스가 요청된 원인입니다.
- 타임라인: 선택한 리소스의 네트워크 활동 분석입니다.
- 쿠키: 요청 및 응답의 쿠키입니다.
네트워크 요청 필터링 및 정렬
네트워크 패널을 사용하면 요청 표에서 요청을 정렬하는 두 가지 방법이 있습니다.
다음은 요청 표에서 요청을 필터링하는 몇 가지 방법입니다.
- 속성별로 요청 필터링하기
- 유형별로 요청 필터링
- 시간별로 요청 필터링하기
- 데이터 URL 숨기기
- 확장 프로그램 URL 숨기기
- 차단된 응답 쿠키가 있는 요청만 표시
- 차단된 요청만 표시
- 서드 파티 요청만 표시
네트워크 헤더 및 응답 검색
모든 리소스의 HTTP 헤더와 응답에서 특정 문자열이나 정규 표현식을 검색하는 방법을 알아보려면 네트워크 헤더 및 응답 검색을 참고하세요.
로드 동작 변경
네트워크 패널에서 로드 동작을 변경하여 페이지의 사용자 환경을 테스트합니다.
네트워크 패널을 사용하여 다음 작업을 할 수 있습니다.
- 브라우저 캐시를 사용 중지하여 신규 방문자 에뮬레이션
- 브라우저 캐시 수동으로 삭제하기
- 브라우저 쿠키 수동 삭제
- 오프라인 에뮬레이션
- 느린 네트워크 연결 시뮬레이션
- HTTP 응답 헤더 재정의
- 사용자 에이전트 재정의
네트워크 요청 데이터 저장 및 내보내기
네트워크 요청 데이터를 저장하고 내보내려면 다음을 참고하세요.