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

Question

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

Answer 1

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

• 使用-.png或-.gif或-.jpg作为网络板式过滤器.
• 许多其他负面过滤器也有效.例如-mime-type:image/png,-larger-than:20k,-domain:yoursite.com,-status-code:404.请参阅Chrome开发人员文档 - 排序和过滤.

Chrome~42之后推出 - 问题链接,在这里宣布

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

Answer 2

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

2014年12月,一位"谷歌Google工程师"喋喋不休地说:

Chrome DevTools:负面文字过滤器刚刚登陆网络面板.列出与给定查询Twitter链接不匹配的 结果

编辑:您甚至可以通过域,mime-type,filesize,...或排除进行筛选,输入-domain:cdn.sstatic.net并组合其中任何一个,mime-type:image/png -larger-than:100K以便在网络面板中仅显示小于100kb的png文件

参见DevTools:Addy Osmani的2015年国情咨文

自Chrome 42以来.

Answer 3

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

你不能只是排除图像,但它应该有所帮助.

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

Answer 4

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

Answer 5

一个简单快捷的解决方案：

就放 -.

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

Answer 6

像-MimeType一样，您可以在过滤器输入中使用domain，如下所示：

域：yourdomain.com