是否可以使用Chrome开发者工具过滤掉某些请求,例如过滤掉所有图像请求?
是否可以使用Chrome开发者工具过滤掉某些请求,例如过滤掉所有图像请求?
Answers:
没有非常灵活的过滤功能,但是底部的栏允许您仅显示特定文档或连接类型的请求:
您不仅可以排除图像,还应该可以。
您还可以按Control/ Command+ F在请求列表中搜索特定的字符串,然后选中“过滤器”框以隐藏不匹配的请求:
负文本过滤器 -列出与给定查询不匹配的结果。
自Chrome〜42 - Issue Link(在此处宣布)以来可用
另一种方法:在“网络”面板中,打开过滤器,然后CTRL/CMD单击要显示的请求类型。要仅隐藏图像请求,请在按住的同时选择除图像以外的所有其他类型CTRL/CMD。
-status-code:200 -status-code:404 -status-code:302
您-.png -.gif -.jp
在过滤器输入框中输入以从结果中排除所有图像。底部显示没有图像的已传输数据总量。
2014年12月在Twitter上发了一个“谷歌工程师在Chrome上工作”的消息:
Chrome DevTools:负文本过滤器刚刚出现在“网络”面板中。列出与给定查询不匹配的 结果Twitter链接
编辑:您甚至可以按域,mime类型,文件大小...进行过滤,也可以通过输入-domain:cdn.sstatic.net
并合并其中的任何一个mime-type:image/png -larger-than:100K
以在网络面板中仅显示小于100kb的png文件来进行排除
参见DevTools:《联盟状况2015》(作者Addy Osmani)
自Chrome 42起。
在我构建的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