有没有办法使用谷歌Chrome开发人员工具过滤网络请求？

Question

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

Answer 1

否定文字过滤器 - 列出与给定查询匹配的结果 。

• 使用 - .png 或 - .gif 或 - 。jpg 作为网络面板中的过滤器。
• 许多其他负面过滤器也有效。例如 -mime-type：image / png ， -larger-than：20k ， -domain：yoursite.com ， -status-代码：404 即可。见Chrome developer docs - Sorting and filtering。

自Chrome~42以来可用 - Issue Link，宣布here

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

Answer 2

您在过滤器输入框中编写-.png -.gif -.jp以从结果中排除所有图像。在底部显示没有图像传输的数据总量。

Google的工程师正在使用Chrome＆＃34;在Dec＆＃39;中喋喋不休：

  

Chrome DevTools：负面文字过滤器刚刚登陆“网络”面板。列出与给定查询匹配的结果 not   Twitter Link

修改：您甚至可以通过输入-domain:cdn.sstatic.net按域，mime-type，filesize，...或排序进行过滤，并将这些mime-type:image/png -larger-than:100K中的任何一个结合起来仅显示网络面板中小于100kb的png文件

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

自Chrome 42以来。

Answer 3

没有非常灵活的过滤功能，但底部的栏确实允许您只显示某个文档或连接类型的请求：

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

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

Answer 4

简单快捷的解决方案：

只需放置-.

因为不要显示任何带有扩展名（静态内容）的url，所以这里的URL很清楚。

Answer 5

与-MimeType类似，您可以在过滤器输入中使用域，如下所示：

  

域：yourdomain.com

Answer 6

如果您打开开发人员工具，请选择网络。如果要专门查看图像请求，请从页面底部的栏中选择图像。过滤器都是独占的，因此您无法过滤掉图像请求。你去吧。

Answer 7

添加-MimeType:image/jpeg过滤器对我有用。

Answer 8

在构建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