Google 크롬 개발자 도구를 사용하여 네트워크 요청을 필터링하는 방법이 있습니까?


125

Chrome 개발자 도구를 사용하여 일부 요청을 필터링 할 수 있습니까 (예 : 모든 이미지 요청 필터링)?


29
재 개설 투표 이것은 주제에서 벗어난 것으로 간주되어서는 안됩니다. Chrome / WebKit 개발자 도구 "프로그래머가 일반적으로 사용하는 소프트웨어 도구"입니다 ( FAQ 에서 허용됨 ). 개발하는 동안 필터링 옵션을 자주 사용했습니다.
Jeremy Banks


정답을 선택하세요. 표시된 답변은 오래되었습니다.
Suraj Jain

답변:


21

매우 유연한 필터링 기능은 없지만 하단의 표시 줄을 사용하면 특정 문서 또는 연결 유형의 요청 만 표시 할 수 있습니다.

이미지를 제외 할 수는 없지만 도움이 될 것입니다.

Control/ Command+ F를 눌러 요청 목록에서 특정 문자열을 검색하고 "필터"상자를 선택하여 일치하지 않는 요청을 숨길 수도 있습니다.

여기에 이미지 설명 입력


9
이 답변은 구식입니다. 다음 항목보기 ( stackoverflow.com/a/27770139/610585 )
undefined

257

제외 텍스트 필터 - 주어진 쿼리와 일치 하지 않는 결과를 나열 합니다.

  • 네트워크 패널에서 필터로 -.png 또는 -.gif 또는 -.jpg 를 사용 합니다.
  • 다른 많은 네거티브 필터도 작동합니다. 예 : -mime-type : image / png , -larger-than : 20k , -domain : yoursite.com , -status-code : 404 . Chrome 개발자 문서-정렬 및 필터링을 참조 하세요 .

크롬 ~ 42 년부터 사용 가능 - 이슈 링크 , 발표했다 여기

다른 방법 : 네트워크 패널에서 필터를 열고 CTRL/CMD표시 할 요청 유형을 클릭합니다. 이미지 요청 만 숨기려면을 누른 상태에서 이미지를 제외한 다른 모든 유형을 선택합니다 CTRL/CMD.


2
OS X에서 CMD + 클릭을 사용합니다.
undefined

7
당신은 또한 에 의한 필터 HTTP 상태 코드 및 기타 기능뿐만 아니라 , 같은 : 도메인이 응답 헤더를하고,보다 큰, 방법, MIME 형식, 방식 설정 - 쿠키 - 이름, 설정 - 쿠키 값, set-cookie-domain, status-code 및 한 번에 여러 개로 필터링 할 수 있습니다. 예를 들어 200, 404 또는 302가 아닌 모든 요청을 보려면 다음을 사용하십시오.-status-code:200 -status-code:404 -status-code:302
Brad Parks

3
Linux에서 Chrome 버전 '51 .0.2704.79 (64 비트) '사용 제외 필터링이 제거 된 것 같습니까? 다른 사람이 보셨나요?
Wilson F

4
Chrome 52에서 여전히 깨진 것처럼 보이지만 슬프게도이 기능을 사용할 수 없습니다.
JKillian

2
이 작업을 수행하려면 필터 입력 옆에있는 "정규식"확인란을 선택 취소해야합니다. 또한 및 요청을 -.js모두 제외 합니다. 어떤 이유로 네거티브 필터 구문은 최신 문서 에서 다루지 않는 것 같습니다 . .js.json
James

34

-.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 이후 .


2
감사합니다 domain:. 바로 지금 제가 찾고 있던 부분입니다. 그것과 다른 많은 것들은 현재 다른 답변에서 링크 된 문서 에서 다루어집니다
JMM

13

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

7

-MimeType과 같이 다음과 같이 필터 입력에 도메인을 사용할 수 있습니다.

domain : yourdomain.com


5

간단하고 짧고 빠른 솔루션 :

그냥 넣어 -.

확장명 (정적 콘텐츠)이있는 URL을 표시하지 않기 때문에 여기에 URL이 명확하게 표시됩니다.

정규식 필터


1

여기에 이미지 설명 입력

개발자 도구를 열면 네트워크를 선택하십시오. 페이지 하단의 표시 줄에서 특별히 이미지 요청을 찾으려면 이미지를 선택합니다. 필터는 모두 배타적이므로 이미지 요청 만 필터링 할 수 없습니다. 됐습니다.


1

-MimeType:image/jpeg필터 추가는 저에게 효과적이었습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.