有没有办法使用 Google Chrome 开发者工具过滤网络请求？

Question

是否可以使用Chrome开发者工具过滤掉一些请求，比如过滤掉所有图片请求？

Answer 1

负面文本过滤器

在文本搜索中使用

-

列出不匹配给定查询的结果。

• 使用 -.png 或 -.gif 或 -.jpg 作为网络面板中的过滤器。
• 许多其他负面过滤器也有效。 例如-mime-类型：image/png、-大于：20k、-域：yoursite.com、-状态代码：404。请参阅 Chrome 开发人员文档 - 过滤。

自 Chrome ~42 起可用 - 问题链接，已在此处宣布

按“请求类型”过滤

在网络面板中打开过滤器，然后 CTRL/CMD 单击要显示的请求的“类型”。 要仅隐藏图像请求，请在按住 CTRL/CMD 的同时选择所有其他类型除了图像。

反转复选框

Chrome 94（~2021 年 9 月）引入了“反转”复选框。它反转整个网络搜索，而

-

可以反转特定字段上的过滤器（因此“-”更强大/灵活。并且这些可以协同工作。）

如果您使用

-.png

否定文本搜索，则相当于

.png

肯定文本搜索并选中反转复选框。添加此技术的DevTools参考没有提到

-

负文本运算符，并且倾向于关注“反转”复选框。）

Answer 2

您在过滤器输入框中输入

-.png -.gif -.jp

即可从结果中排除所有图像。底部显示不含图像的传输数据总量。

一位“Google 工程师在 Chrome 上工作”于 2014 年 12 月发推文：

Chrome DevTools：负面文本过滤器刚刚登陆网络面板。列出与给定查询不匹配的结果 推特链接

编辑

：您甚至可以按域、mime 类型、文件大小等进行过滤，或者通过输入 -domain:cdn.sstatic.net 进行排除，并组合这些

mime-type:image/png -larger-than:100K

中的任何一个以在网络面板中仅显示小于 100kb 的 png 文件参见

DevTools：Addy Osmani 的 2015 年国情咨文

自 Chrome 42 起

。

Answer 3

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

Answer 4

您不能只排除图像，但它应该有帮助。

您还可以按

Control

/Command+F 在请求列表中搜索特定字符串，并选中“过滤”框以隐藏不匹配的请求：

Answer 5

在新更新的 chrome 中，您可以轻松选择一些内容类型 JS、CSS、IMG、Font... 来过滤请求；参见：

（现在我的版本是93.0.4577.63） 旧解决方案：

一个简单、简短、快速的解决方案：

只要放

-.

不要显示任何带有扩展名的网址（静态内容），因此您可以在此处清楚地看到网址。

Answer 6

域名：yourdomain.com

Answer 7

如果打开开发者工具，选择网络。如果您想专门查找图像请求，请从页面底部的栏中选择图像。过滤器都是排他性的，因此您不能仅过滤掉图像请求。就这样吧。

Answer 8

-MimeType:image/jpeg

过滤器对我有用。

Answer 9