Javascript 有没有办法使用 Google Chrome 开发者工具过滤网络请求？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14637278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to filter network requests using Google Chrome developer tools?
提问by Adam Lee
Is it possible to filter out some requests using Chrome developer tools, say, filter out all image requests?
是否可以使用 Chrome 开发者工具过滤掉一些请求，比如过滤掉所有的图片请求？
采纳答案by Facebook Staff are Complicit
There isn't a very flexible filtering feature, but the bar at the bottom does allow you to only show requests of a certain document or connection type:
没有非常灵活的过滤功能，但底部的栏确实允许您只显示特定文档或连接类型的请求：
You can't just exclude images, but it should help.
您不能只排除图像，但它应该会有所帮助。
You can also press Control/Command+Fto search for a particular string in the request list, and check the "filter" box to hide requests that don't match:
您还可以按Control/ Command+F在请求列表中搜索特定字符串，并选中“过滤器”框以隐藏不匹配的请求：
回答by Mark Doyle
Negative text filters- list results notmatching a given query.
否定文本过滤器- 列出与给定查询不匹配的结果。
- Use -.pngor -.gifor -.jpgas filter in the network panel.
- Many other negative filters work too. e.g. -mime-type:image/png, -larger-than:20k, -domain:yoursite.com, -status-code:404. See Chrome developer docs - Sorting and filtering.
- 使用-.png或-.gif或-.jpg作为网络板式过滤器。
- 许多其他负面过滤器也可以使用。例如-mime-type:image/png、-larger-than:20k、-domain:yoursite.com、-status-code:404。请参阅Chrome 开发人员文档 - 排序和过滤。
Available since Chrome ~42- Issue Link, announced here
Another approach:In the Network panel open the filter and CTRL/CMD-click the types of requests you want to show. To hide just image requests then select all the other types exceptimages while holding CTRL/CMD.
另一种方法：在“网络”面板中打开过滤器并CTRL/CMD单击要显示的请求类型。要仅隐藏图像请求，请在按住 的同时选择除图像以外的所有其他类型CTRL/CMD。
回答by Ivica Vucemilo
You write -.png -.gif -.jpin the filter input box to exclude all images from the results. At the bottom it shows the total amount of data transferred without images.
您-.png -.gif -.jp在过滤器输入框中写入以从结果中排除所有图像。在底部，它显示了没有图像的传输数据总量。
An "Engineer at Google working on Chrome" twittered in Dec'14:
14 年 12 月，一位“谷歌工程师在 Chrome 上工作”发推文：
Chrome DevTools: Negative text filters just landed in the Network panel. List results notmatching a given query Twitter Link
Chrome DevTools：负面文本过滤器刚刚登陆网络面板。列出与给定查询不匹配的 结果Twitter 链接
edit: you can even filter by domain, mime-type, filesize, ... or exclude by entering -domain:cdn.sstatic.netand combine any of these mime-type:image/png -larger-than:100Kto show only png files smaller than 100kb in network panel
编辑：您甚至可以按域、mime 类型、文件大小等进行过滤，或者通过输入-domain:cdn.sstatic.net和组合这些中的任何一个mime-type:image/png -larger-than:100K来排除，以在网络面板中仅显示小于 100kb 的 png 文件
see DevTools: State Of The Union 2015 by Addy Osmani
参见DevTools: State Of The Union 2015 by Addy Osmani
Since Chrome 42.
自 Chrome 42 以来。
回答by YenForYang
Under my build of Google Chrome (Version 74.0.3729.157 (64-bit)), I've found the following filters available (I've added some examples). Note that DevTools has an AutoComplete functionality (which helps a lot in sorting this stuff out).
在我构建的 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
回答by Jules Goullee
Like -MimeType you can use domain in filter input, like this:
像 -MimeType 一样，您可以在过滤器输入中使用域，如下所示：
domain:yourdomain.com
域：yourdomain.com
回答by Nabi K.A.Z.
A simple and short and quickly solution:
一个简单快捷的解决方案：
Just put -.
就放 -.
For don't show any url with extension (static contents), so you have URLs clearly in here.
因为不要显示任何带有扩展名的 url（静态内容），所以你在这里清楚地有 URL。
回答by Beat Richartz
If you open the developer tools, choose network. From the bar at the bottom of the page, choose images if you want to look specifically for image requests. The filters are all exclusive, so you can not filter out just image requests. There you go.
如果打开开发者工具，选择网络。如果您想专门查看图像请求，请从页面底部的栏中选择图像。过滤器都是独占的，因此您不能仅过滤掉图像请求。你去吧。
回答by Matt
Adding a -MimeType:image/jpegfilter worked for me.
添加-MimeType:image/jpeg过滤器对我有用。
