Chrome 개발자 도구를 사용하여 일부 요청을 필터링 할 수 있습니까 (예 : 모든 이미지 요청 필터링)?
답변
매우 유연한 필터링 기능은 없지만 하단의 표시 줄을 사용하면 특정 문서 또는 연결 유형의 요청 만 표시 할 수 있습니다.
이미지를 제외 할 수는 없지만 도움이 될 것입니다.
Control/ Command+ F를 눌러 요청 목록에서 특정 문자열을 검색하고 “필터”상자를 선택하여 일치하지 않는 요청을 숨길 수도 있습니다.
답변
제외 텍스트 필터 – 주어진 쿼리와 일치 하지 않는 결과를 나열 합니다.
- 네트워크 패널에서 필터로 -.png 또는 -.gif 또는 -.jpg 를 사용 합니다.
- 다른 많은 네거티브 필터도 작동합니다. 예 : -mime-type : image / png , -larger-than : 20k , -domain : yoursite.com , -status-code : 404 . Chrome 개발자 문서-정렬 및 필터링을 참조 하세요 .
크롬 ~ 42 년부터 사용 가능 – 이슈 링크 , 발표했다 여기
다른 방법 : 네트워크 패널에서 필터를 열고 CTRL/CMD표시 할 요청 유형을 클릭합니다. 이미지 요청 만 숨기려면을 누른 상태에서 이미지를 제외한 다른 모든 유형을 선택합니다 CTRL/CMD.
답변
-.png -.gif -.jp
결과에서 모든 이미지를 제외하려면 필터 입력 상자에 씁니다 . 하단에는 이미지없이 전송 된 총 데이터 양이 표시됩니다.
12 월 14 일에 트위터에 올린 “Chrome에서 작업하는 Google의 엔지니어”:
Chrome DevTools : 네거티브 텍스트 필터가 네트워크 패널에 방금 도착했습니다. 주어진 검색어와 일치
하지 않는 결과 나열 Twitter 링크
편집 : 도메인, MIME 유형, 파일 크기 등으로 필터링하거나 네트워크 패널에서 100kb보다 작은 png 파일 만 표시하도록 -domain:cdn.sstatic.net
이들 중 하나 를 입력 하고 결합하여 제외 mime-type:image/png -larger-than:100K
할 수도 있습니다.
Addy Osmani의 DevTools : State Of The Union 2015 참조
Chrome 42 이후 .
답변
Google Chrome 빌드 (버전 74.0.3729.157 (64 비트))에서 다음 필터를 사용할 수 있습니다 (몇 가지 예를 추가했습니다). DevTools에는 AutoComplete 기능이 있습니다 (이 항목을 정렬하는 데 많은 도움이 됨).
domain:
-domain:
# Use a * character to include multiple domains.
# Ex: *.com, domain:google.com, -domain:bing.com
has-response-header:
-has-response-header:
# Filter resources with the specified HTTP response header.
# Ex: has-response-header:Content-Type, has-response-header:age
is:
-is:
# is:running finds WebSocket resources
# I've also come across:
# - is:from-cache,
# - is:service-worker-initiated
# - is:service-worker-intercepted
larger-than:
-larger-than:
# Note: larger-than:1000 is equivalent to larger-than:1k
# Ex: larger-than:420, larger-than:4k, larger-than:100M
method:
-method:
# method:POST, -method:OPTIONS, method:PUT, method:GET
mime-type:
-mime-type:
# Ex: mime-type:application/manifest+json, mimetype:image/x-icon
mixed-content:
-mixed-content:
# 2 that I've found documented:
# mixed-content:all (Show all mixed-content resources)
# mixed-content:displayed (Show only those currently displayed) (never used this personally)
scheme:
-scheme:
# Ex: scheme:http, scheme:https,
# Note that there are also scheme:chrome-extension, scheme:data
set-cookie-domain:
-set-cookie-domain:
#
# Ex: set-cookie-domain:.google.com
set-cookie-name:
-set-cookie-name:
# Match Set-Cookie response headers with name
# Ex: set-cookie-name:WHATUP
set-cookie-value:
-set-cookie-value:
# Match Set-Cookie response headers with value
# Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo
status-code:
-status-code:
# Match HTTP status code
# Ex: status-code:200, -status-code:302