是否有办法使用Google Chrome开发者工具过滤网络请求?

sauutmhj  于 2022-12-06  发布在  Go
关注(0)|答案(9)|浏览(354)

有没有可能使用Chrome开发者工具过滤掉一些请求,比如说,过滤掉所有的图片请求?

0md85ypi

0md85ypi1#

负文本过滤器-列出与给定查询 * 不 * 匹配的结果。

  • 使用**-.png-.gif-.jpg**作为网络面板中的过滤器。
  • 许多其他的负面过滤器也可以使用。例如**-MIME类型:image/png**,-大于:20 k-域名:yoursite.com-状态代码:404。请参阅Chrome开发者文档-过滤。
  • 自Chrome 42* 起推出-Issue Link,已宣布推出here
  • 另一种方法:* 在“网络”面板中打开筛选器,然后按住CTRL/CMD键单击要显示的请求类型。要仅隐藏图像请求,请在按住CTRL/CMD键的同时选择除图像之外的所有其他类型。
vxf3dgd4

vxf3dgd42#

在过滤器输入框中输入-.png -.gif -.jp,从结果中排除所有图像。在底部,它显示了不包含图像的传输数据总量。
12月14日,一位“谷歌Chrome工程师”在Twitter上写道:
Chrome开发工具:否定文本过滤器刚刚进入网络面板。列出 * 不 * 匹配给定查询Twitter Link的结果

edit:您甚至可以通过域、mime类型、文件大小...或通过输入-domain:cdn.sstatic.net排除进行过滤,并合并这些mime-type:image/png -larger-than:100K中的任何一个,以便在网络面板中仅显示小于100kb的png文件

请参阅DevTools: State Of The Union 2015 by Addy Osmani

从Chrome 42开始

1yjd4xko

1yjd4xko3#

在我的Google Chrome版本(版本74.0.3729.157(64位))下,我发现了以下可用的过滤器(我添加了一些示例)。注意,DevTools有一个自动完成功能(这对整理这些东西很有帮助)。

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
gzszwxb4

gzszwxb44#

没有非常灵活的过滤功能,但是底部的栏允许您只显示特定文档或连接类型的请求:

你不能只是排除图像,但它应该有帮助。
您也可以按Control/Command+F在请求列表中搜索特定字符串,并选中“筛选器”框以隐藏不匹配的请求:

ioekq8ef

ioekq8ef5#

2021年更新:

在新的更新chrome,你可以选择一些内容类型JS,CSS,IMG,字体,...为过滤器请求容易;请参阅:
x1c 0d1x(现在我使用的是版本93.0.4577.63)

旧解决方案:

一个简单、简短、快速的解决方案:
只要把-.
因为不显示任何带扩展名的网址(静态内容),所以这里有清晰的网址。

7ajki6be

7ajki6be6#

像-MimeType一样,你可以在过滤器输入中使用domain,如下所示:
域名:yourdomain.com

z0qdvdin

z0qdvdin7#

如果你打开开发者工具,选择网络。从页面底部的栏中,选择图片,如果你想专门寻找图片请求。过滤器都是独占的,所以你不能只过滤图片请求。好了。

vof42yt1

vof42yt18#

添加一个-MimeType:image/jpeg过滤器对我很有效。

kxkpmulp

kxkpmulp9#

您可以根据类型进行过滤。如果只针对Fetch/XHR(XMLHttpRequest),请打开开发者工具,然后只选择Fetch/XHR和相应的其他类型。

相关问题