如何在 Chrome devtools 中查看 HTTP 缓存使用的空间？答案

【问题标题】：How to view space used by the HTTP cache in Chrome devtools?如何在 Chrome devtools 中查看 HTTP 缓存使用的空间？
【发布时间】：2019-03-01 03:52:34
【问题描述】：

我可以在 devtools 中查看内置 HTTP 缓存使用的空间量吗？

我想知道 Chrome 使用了多少空间（在我开发时）来缓存我的应用的资源。

【问题讨论】：

见Does anyone use chrome://view-http-cache?; Where has chrome://cache been moved to?; Why doesn't Chrome respect the DiskCacheSize policy? ; ChromeCacheView; A standalone WebApp for viewing chrome://net-export NetLog dump files
所以基本上，在 Chrome 中根本不可能。
不会说“不可能”。之前的评论旨在简要概述该功能的历史和状态。
见Chrome DevTools Protocol Viewer - DataEntry -> responseHeaders; Chrome DevTools Protocol Viewer - CachedResponse -> body string Entry content, base64-encoded.

标签： javascript google-chrome google-chrome-devtools cache-control http-caching

【解决方案1】：

在支持的浏览器（不是 Safari 或 Edge）中，使用它来估算存储空间：

navigator.storage.estimate().then(estimate => console.log(estimate));

输出签名因浏览器而异（此处显示的是 Chrome 77.x）：

{
  quota: 599997077913,
  usage: 265,
  usageDetails: {
    indexedDB: 265
  },
  // .. 
}

【讨论】：