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

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


답변

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

domain : yourdomain.com


답변

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

그냥 넣어 -.

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

정규식 필터


답변

여기에 이미지 설명 입력

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