caching - 如何知道资源是否真正从 chrome devtools 的缓存中加载？

Question

Chrome devtools 网络选项卡显示相同大小的缓存资源文件的“通过网络传输的数据”值。如果我阻止出现在上图中的最后一个请求，则不会加载图片，但第二个请求仍然显示传输了相同数量的数据。如何知道图像资源是否真的从缓存中提取并节省了带宽？

注意：我使用的是 max-age 缓存控制策略，在 Firefox 中它显然可以正常工作。

Answer 1

您请求资源的服务器的访问日志可以为您的问题提供最终答案。只需在您的请求中添加一个“指纹参数”并检查来自服务器的访问日志。

另一种选择是使用类似 webQsse 的扩展程序（https://chrome.google.com/webstore/detail/webqsee-web-sniffer-recor/gamdpfnfkjknkimfbboonmgdfnondfme），它还显示图像的加载位置。