有没有一种方法可以过滤网络请求使用谷歌 Chrome 开发工具？

有没有可能使用 Chrome 开发工具过滤掉一些请求，比如说，过滤掉所有的图像请求？

87350 次浏览
小开
最佳答案

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

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

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

enter image description here

小开

enter image description here

如果打开开发工具，请选择网络。如果您想专门查找图像请求，请从页面底部的栏中选择图像。过滤器都是独占的，所以不能只过滤图像请求。这就对了。

小开

负文本过滤器 -list 结果 没有匹配给定查询。

  • 在网络面板中使用 - . png、 - . gif或 - . jpg作为过滤器。
  • 许多其他的负滤波器也可以工作，例如 - mime-type: image/png、 大于两万、 域名: yoursite.com、 状态代码: 404。

从 Chrome ~ 42开始发布-问题连结，在这里宣布

另一种方法: 在 Network 面板中打开过滤器，然后按 CTRL/CMD-click 您想要显示的请求类型。要隐藏只是图像请求，然后选择所有其他类型的 除了图像，同时保持 CTRL/CMD。

小开

在筛选器输入框中编写 -.png -.gif -.jp以排除结果中的所有图像。在底部，它显示了没有图像传输的数据总量。

12月14日，一位“谷歌的工程师正在开发 Chrome 浏览器”在推特上写道:

Chrome DevTools: 负文本过滤器刚刚出现在网络面板中。列出与给定查询匹配的结果 没有 Twitter 链接

编辑 : 您甚至可以通过输入 -domain:cdn.sstatic.net来过滤域、 mime-type、 filesize，... 或者排除，然后将这些 mime-type:image/png -larger-than:100K中的任何一个组合起来，在网络面板中只显示小于100kb 的 png 文件

见 DevTools: State Of The Union 2015作者: Addy Osmani

自从 Chrome42 。

小开

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

小开

Like-MimeType 可以在过滤器输入中使用 domain，如下所示:

域名: yourdomain.com

小开

在我构建的 Google Chrome (Version 74.0.3729.157(64-bit))中，我发现以下过滤器是可用的(我添加了一些示例)。请注意，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
小开

2021年最新情况:

在新的更新铬，您可以选择一些内容类型的 JS，CSS，IMG，字体，... 过滤请求很容易;
enter image description here (现在我的版本是93.0.4577.63)

老办法:

一个简单、简短、迅速的解决方案:

就写 -.

因为不显示任何带扩展名的 URL (静态内容) ，所以这里的 URL 很清楚。

regex filter

小开

您可以根据类型进行筛选。对于只有 Fetch/XHR (XMLHttpRequest) ，打开开发人员工具，然后只选择 Fetch/XHR 以及相应的其他类型。

enter image description here


提交答案