是否可以使用Google Chrome开发者工具过滤网络请求?


125

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


29
投票重新开放;这不应该被认为是题外话。Chrome / WebKit开发人员工具显然 “程序员常用的软件工具”(在常见问题解答中允许);在开发过程中,我经常使用过滤选项。
杰里米·班克斯


请选择正确的答案,标记的答案早已过时。
Suraj Jain

Answers:


21

没有非常灵活的过滤功能,但是底部的栏允许您仅显示特定文档或连接类型的请求:

您不仅可以排除图像,还应该可以。

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

在此处输入图片说明


9
这个答案已经过时了。看看下一个(stackoverflow.com/a/27770139/610585
未定义

256

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

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

自Chrome〜42 - Issue Link在此处宣布)以来可用

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


2
使用CMD +点击OS X.
未定义

7
您还可以按http状态代码和其他功能进行过滤,例如:domain,has-response-header,is-than,method,mime-type,scheme,set-cookie-name,set-cookie-value, set-cookie-domain,状态代码,并且您可以一次按多个进行过滤,例如查看所有不是200、404或302的请求,请使用:-status-code:200 -status-code:404 -status-code:302
Brad Parks

3
在Linux上使用Chrome版本“ 51.0.2704.79(64位)”。负过滤条件已删除?还有其他人看到吗?
威尔逊F

4
从Chrome 52开始似乎还是坏了,无法使此功能正常运行。
JKillian '16

2
请注意,必须取消选中过滤器输入旁边的“ Regex”复选框,此功能才能起作用。另请注意,这-.js将同时排除.js.json请求。由于某种原因,最新文档中似乎并未涵盖否定过滤器语法。
詹姆斯,

34

-.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起


2
谢谢,这domain:正是我现在正在寻找的部分。这和其他的一堆正在覆盖在文档从对方的回答链接
JMM

13

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

7

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

域:yourdomain.com


4

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

刚放 -.

对于不要显示带有扩展名(静态内容)的url,因此您在此处清楚地具有URL。

正则表达式过滤器


1

在此处输入图片说明

如果打开开发人员工具,请选择“网络”。如果要专门针对图像请求,请从页面底部的栏中选择图像。过滤器都是排他的,因此您不能仅过滤图像请求。妳去


1

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.