요청 조건 탭을 사용하여 특정 URL을 차단하거나 개별 리소스에 맞춤 네트워크 제한 프로필을 적용합니다.
개요
이전에는 Chrome DevTools에서 전체 세션에 대해 전역적으로 네트워크 조건을 제한 (모든 요청에 영향을 미침)하거나 특정 요청을 완전히 차단할 수 있었습니다. 하지만 전체 페이지를 느리게 하지 않고 지연 시간이 있는 서드 파티 API나 느린 연결에서 로드되는 큰 히어로 이미지와 같은 특정 느린 리소스를 애플리케이션이 처리하는 방식을 테스트하기는 어려웠습니다.
Chrome 144부터 DevTools에서 개별 요청 제한을 지원합니다. 기존의 차단 기능과 함께 특정 네트워크 조건을 적용할 개별 네트워크 요청을 선택할 수 있습니다. 이 기능은 이전에 '네트워크 요청 차단' 드로어에 있던 기능을 더 포괄적인 새 요청 조건 드로어로 이동합니다. 이 기능은 전체 사이트가 아닌 요청된 리소스만 느리게 하여 더 정확하고 디버깅 속도를 높입니다.
요청 제한 또는 차단
특정 리소스를 차단하거나 제한하려면 네트워크 패널에서 요청을 마우스 오른쪽 버튼으로 클릭하고 정확한 URL 또는 전체 도메인에 대해 요청 차단 또는 요청 제한을 선택합니다. 이 작업을 실행하면 요청 조건 드로어가 자동으로 열리고 항목에 대한 새 규칙이 생성되며 선택한 네트워크 제약 조건이 즉시 적용됩니다.
요청 조건 창
새로운 요청 조건 드로어에서 영향을 받는 요청과 속도를 얼마나 늦출지 제어할 수 있습니다.
표준 사전 설정 (예: 느린 3G) 또는 자체 맞춤 프로필을 선택하여 제한 설정을 맞춤설정하고, 와일드 카드 (*)를 사용하여 URL 패턴을 수정하여 이러한 조건을 특정 동적 리소스 또는 요청 그룹에 적용할 수 있습니다.
요청이 여러 패턴과 일치하는 경우 DevTools는 발견된 첫 번째 규칙을 적용합니다. 서랍의 화살표 버튼을 사용하여 우선순위가 높은 규칙을 목록 상단으로 이동하여 이 우선순위를 제어할 수 있습니다.
제한되거나 차단된 요청 이해하기
자연적으로 느린 요청과 DevTools에 의해 인위적으로 제한되는 요청을 구분하는 것이 중요합니다. 페이지를 새로고침하면 새 제한 규칙이 적용됩니다. 네트워크 패널에서 영향을 받는 요청을 쉽게 확인할 수 있습니다.
- 차단된 요청은 빨간색으로 표시되고 상태 열에
(blocked:devtools)상태가 표시됩니다. - 제한된 요청은 노란색 또는 금색으로 표시되며 시간 열에 시계 아이콘이 있습니다. 아이콘에 마우스를 가져가면 적용된 네트워크 조건을 정확하게 확인할 수 있습니다. 이 정보는 타이밍 하위 패널에서도 확인할 수 있습니다.
요청을 제한하면 페이지 성능에 영향을 미칠 수 있습니다. 성능 프로필을 기록할 때 네트워크 트랙의 요청 위로 마우스를 가져가면 적용된 네트워크 조건을 자세히 설명하는 도움말이 표시됩니다.
