如何在 chrome devtools 中过滤缓存的请求？答案

【问题标题】：How to filter cached requests in chrome devtools?如何在 chrome devtools 中过滤缓存的请求？
【发布时间】：2016-03-11 20:26:39
【问题描述】：

背景

Chrome 开发工具的“网络”标签可以选择根据 URL 的字符串匹配和一些预定义的内容类型过滤器 (CSS/JS/...) 过滤请求。如果您设置了过滤器，网络选项卡的底部栏会包含仅与匹配过滤器相关的额外信息。

是否可以过滤请求是否由浏览器缓存提供（或不提供）？

如果有人有其他方法可以做到这一点：

我想测量我的 HTML-UI 的“真实”请求计数/传输大小。网络选项卡的底部已经正确包含传输大小，但是请求计数也包含缓存请求。

但是我可以使用 wireshark/tcpdump，HTML-UI 可以从其他域请求资源，也许我可以编写一个复杂的过滤器，但这似乎是一个正常的用例。

【问题讨论】：

【解决方案1】：

您可以使用is:from-cache 查询过滤来自浏览器磁盘或内存缓存的请求。这可以使用查询 -is:from-cache 来否定。

【讨论】：

【解决方案2】：

您可以使用larger-than:1 过滤器来隐藏所有返回小于 1 字节的请求。当我对此进行测试时，从缓存提供的请求在 size 列中有 (from cache) 并被此过滤器排除。否定它只显示缓存的缓存请求。

当然，这也将排除/包括来自服务器的 0B 响应。如果这是一个问题，您可以添加 mimetype 或状态代码过滤器来实现您的目标，具体取决于确切的响应。

【讨论】：

【解决方案3】：

对于您的过滤器之一，请使用-status-code:304。这将隐藏从缓存中加载的内容。然后请求计数和转移量将显示从页面总数中过滤出来的数量。如果您说只想检查缓存的项目，请从过滤器中删除否定。

【讨论】：

浏览器缓存有所不同。 304 是对服务器的合法请求/响应，etag 与您之前的相同。浏览器缓存的请求显示为 status-code:200
那目前还不能专门过滤掉。为什么你需要过滤掉它？在任何情况下我都看不到它有用。
我想查看浏览器通过网络发出的实际请求。我能想到很多重要的案例。
如果您能想到“很多案例”，请提供示例以便对其进行调查。如果您确实需要“在线上发出的实际请求”，请查看 Wireshark 或其他数据包检查工具。
其他人的服务器 - 无法下载额外的工具。调试 Web 应用程序行为 - 将请求限制为服务器实际处理的请求。调试意外的吞吐量测试结果 - 将真实浏览器发送的请求与不缓存的负载测试器发送的请求进行比较。其中两个是非常大的类别，包含大量现实世界的任务。