요청 조건: 네트워크 요청을 차단하거나 제한하여 사이트 테스트

Ewa Gasperowicz

요청 조건 드로어를 사용하여 이미지나 스타일시트와 같은 특정 리소스가 로드되지 않거나 리소스가 더 느리게 로드되는 경우 페이지가 어떻게 작동하는지 테스트합니다.

개요

요청 조건 드로어를 사용하면 여러 리소스 또는 '패턴'을 동시에 차단하고 목록에서 전환할 수 있습니다. 네트워크 패널에서 네트워크 요청 도메인 또는 URL을 차단�� 수도 있으며, 해당 패턴이 요청 조건 드로어에 표시됩니다.

요청 조건 창을 사용하면 다음 작업을 할 수 있습니다.

  • 패턴을 추가하거나 삭제합니다.
  • 패턴을 수정합니다.
  • 모든 패턴을 삭제합니다.
  • 네트워크 요청 차단 또는 제한을 사용 설정 또는 사용 중지합니다. 사용 설정하면 개별 패턴에 대해 차단 또는 제한을 전환할 수 있습니다.

DevTools를 닫으면 네트워크 요청 차단 및 제한이 사용 중지됩니다. 패널을 열고 차단을 다시 사용 설정해야 합니다. 하지만 브라우저를 닫은 후에도 DevTools는 패턴을 저장합니다.

네트워크 요청 차단 또는 제한

DevTools의 네트워크 패널에서 네트워크 요청을 차단할 수 있습니다.

  1. 네트워크 패널의 이름 섹션에서 요청을 마우스 오른쪽 버튼으로 클릭하고 요청 차단 또는 요청 제한을 선택합니다. 이미지
  2. 요청 조건 드로어가 자동으로 열리고 관련 패턴이 차단되거나 제한된 것으로 표시됩니다. 이렇게 하면 차단 및 제한 사용 설정 체크박스도 자동으로 사용 설정됩니다.

제한되거나 차단된 요청 이해하기

느린 요청과 DevTools에 의해 제한되는 요청을 구분하려면 네트워크 및 성능 패널을 확인하면 됩니다.

네트워크 패널에서 다음 단계를 따르세요.

  • 차단된 요청: 상태 열을 확인합니다. 차단된 요청은 명시적으로 (blocked:devtools)로 표시되며 빨간색으로 표시됩니다.
  • 제한된 요청: 요청 URL 옆에 금색 또는 갈색 아이콘이 표시됩니다. 시간 열을 확인할 수도 있습니다. 아이콘이 타이밍 옆에 표시됩니다.
    • 아이콘 위로 마우스를 가져가면 적용된 네트워크 조건을 정확하게 확인할 수 있습니다.
    • 아이콘을 클릭하면 요청 조건 드로어가 바로 열리고 스로틀링을 담당하는 규칙이 강조 표시됩니다.

차단되고 제한된 요청 표시기가 표시된 DevTools의 네트워크 패널

성능 패널: 성능 프로필을 기록할 때 네트워크 상태를 확인할 수도 있습니다. 방법은 다음과 같습니다.

  1. 성능 패널로 이동하여 녹화 ��일을 캡처합니다.
  2. 네트워크 트랙에서 요청을 찾습니다.
  3. 요청 위로 마우스를 가져가면 적용된 네트워크 조건을 자세히 설명하는 도움말이 표시됩니다.

요청 조건 창 열기

요청 조건 창을 열려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. 다음을 눌러 명령어 메뉴를 엽니다.
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P 명령어 메뉴
  3. Request conditions를 입력하고 요청 조건 표시를 선택한 다음 Enter 키를 누릅니다. DevTools 창 하단에 요청 조건 드로어가 표시됩니다.

또는 오른쪽 상단에서 도구 더보기 > 요청 조건을 선택합니다.

제한 설정 수정

제한 설정을 맞춤설정하려면 다음 단계를 따르세요.

  1. 요청 조건 드로어를 열고 특정 요청으로 이동합니다.
  2. 제한 열의 드롭다운 메뉴에서 사전 설정을 선택합니다 (예: 느린 3G, 빠른 3G). 맞춤 네트워크 프로필을 추가할 수도 있습니다.

요청 패턴 수정

패턴을 수정하려면 요청 조건 드로어에서 패턴 옆에 있는 수정 버튼을 클릭하고 수정 후 저장을 클릭합니다. 조건 추가 버튼을 클릭하여 새 조건을 만들 수도 있습니다. URL 패턴을 입력할 때 와일드카드 (*)를 사용하여 URL의 동적 부분을 일치시킬 수 있습니다. 예를 들어 *://example.com은 해당 도메인에 대한 모든 API 요청과 일치합니다. URL 패턴 API를 사용하여 와일드 카드로 여러 리소스에 한 번에 조건을 적용할 수 있습니다.

네트워크 요청 차단 전환

차단 및 제한 사용 설정 체크박스를 사용하면 모든 패턴에 대해 네트워크 요청 차단을 한 번에 사용 설정하거나 사용 중지할 수 있습니다.

URL 일치 패턴 재정렬

요청이 여러 패턴과 일치하는 경우 DevTools는 발견된 첫 번째 규칙을 적용합니다. 이 우선순위��� 관리하려면 요청 조건 드로어에서 특정 규칙 옆에 있는 화살표 버튼을 클릭하여 ���선순위가 높은 규칙을 목록의 상단으로 이동합니다.

네트워크 요청 차단 패턴 삭제

목록에서 특정 네트워크 요청 차단 패턴을 삭제하려면 다음 단계를 따르세요.

  • 요청 조건 패널에서 삭제 버튼을 클릭합니다.

모든 네트워크 요청 차단 패턴을 삭제하려면 활동 표시줄에서 모든 네트워크 차단 패턴 삭제 버튼을 클릭합니다.