如何在Chrome DevTools中过滤缓存请求？

Question

背景

Chrome开发者工具中的“网络”标签页可以根据URL的字符串匹配和一些预定义的内容类型过滤器（CSS/JS/等）来过滤请求。如果设置了过滤器，网络标签页的底部栏会显示与匹配过滤器相关的额外信息。

问题

是否可能过滤浏览器缓存中服务的（或未服务的）请求？

用例

如果有人有一种替代方法：

我想要测量我的HTML界面的“真实”请求计数/传输大小。网络标签页的底部已经正确地显示了传输大小，但请求计数也包含了缓存的请求。

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

- p1100i

Answer 1

您可以使用 larger-than:1 的过滤器来隐藏所有返回少于1字节的请求。我测试时，从缓存中提供的请求在大小列中带有 (from cache) ，因此被该过滤器排除。取反则仅显示缓存的请求。

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

- John Neuhaus

---

如何仅显示已缓存的请求？ - MasterJoe

@testerjoe2 我本以为那是个愚蠢的问题，直到我去确认它。我花了很长时间来验证你会使用“-larger-than:1”（注意减号）。 - John Neuhaus

但是这也将包括所有的0b响应，除非你有其他方法来过滤它们。 - John Neuhaus

Answer 2

您可以使用 is:from-cache 查询筛选从浏览器磁盘或内存缓存中提供的请求。这可以使用 -is:from-cache 查询对其进行否定。

- Matt Dunn

---

感谢分享这个显然被隐藏得很好的 Chrome 秘密。 - Tino

感谢您发布这个问题，它确实很有帮助。 - marcel_pi

酷！今天学到了有用的东西 :) - Naveen Kumar V

Answer 3

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

- Garbee

---

浏览器缓存是一些不同的东西。304是向服务器发送合法请求/响应，表示ETag与之前相同。浏览器缓存的请求将显示状态码200。 - p1100i

那你目前无法具体过滤它。为什么你需要过滤掉它？在任何情况下我都看不到它有用处。 - Garbee

我想看到浏览器通过网络发送的实际请求。我可以想到很多情况下这非常重要。 - AndrewF

如果你能想到“很多情况”，请提供示例，以便进行研究。如果你真的需要“实际的请求，因为它们是在网络上发送的”，那么可以使用Wireshark或其他数据包检查工具。 - Garbee

他人的服务器-无法下载额外工具。调试Web应用程序行为-将请求限制为服务器实际处理的请求。调试意外的吞吐量测试结果-比较真实浏览器发送的请求与不缓存的负载测试器发送的请求。这两个方面涵盖了大量的实际任务。 - John Neuhaus

@Garbee - John的评论回答了你的问题吗？它有意义吗？ - MasterJoe