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