无需登录 数据私有 本地保存

Service Worker缓存查看与调试 - 列出缓存条目

20
0
0
0
-
缓存总数
-
总条目数
-
存储使用量
缓存列表 0

暂无缓存数据

缓存条目

请选择一个缓存查看条目

常见问题与知识点
Service Worker 缓存（Cache API）是浏览器提供的一种编程式缓存机制，由开发者通过 JavaScript 完全控制。与浏览器自动管理的 HTTP 缓存不同，SW 缓存允许开发者精确决定哪些资源被缓存、何时更新、何时清除。它常用于实现离线访问、提升加载性能和自定义缓存策略。HTTP 缓存依赖响应头（如 Cache-Control）自动工作，而 SW 缓存则通过 caches.open() 和 cache.put() 等方法手动管理。
当 Service Worker 缓存了跨域资源（例如来自 CDN 的字体或图片）且该资源未返回 CORS 头（如 Access-Control-Allow-Origin）时，浏览器会将其标记为 opaque（不透明）响应。这类响应的状态码始终为 0，body 为 null，无法读取内容，且浏览器会为其分配固定的存储配额（通常约 7MB/条目）。这是出于安全考虑，防止恶意脚本窃取跨域资源的内容。
存储配额因浏览器和磁盘空间而异。Chrome 允许每个源使用约60%的可用磁盘空间（共享池），Firefox 约50%，Safari 通常限制在约1GB。您可以使用 navigator.storage.estimate() 查看当前源的配额和使用量。当存储空间不足时，浏览器可能会自动清理未使用的缓存（LRU策略）。上方的进度条显示了您当前源的存储使用情况。
您可以通过以下方式清除缓存：① 使用本工具点击"清空全部"按钮或逐个删除缓存/条目；② 在浏览器开发者工具的 Application → Cache Storage 面板中右键删除；③ 在代码中调用 caches.delete('缓存名称')；④ Chrome 地址栏访问 chrome://settings/clearBrowserData 选择清除缓存存储。注意：清空缓存后，离线功能可能暂时不可用，直到 SW 重新缓存资源。
合理使用 SW 缓存可以显著提升性能——缓存资源从本地磁盘读取比网络请求快得多，能有效减少首屏加载时间。但如果缓存策略不当（如缓存过期资源未及时更新、缓存体积过大占用过多磁盘），也可能导致用户看到旧内容或存储配额耗尽。推荐使用分层缓存策略：静态资源（CSS/JS/字体）使用长期缓存+版本号管理，API数据使用短期缓存+网络优先策略。
推荐调试步骤：① 使用本工具查看当前所有缓存及条目，确认资源是否已正确缓存；② 打开 Chrome DevTools → Application → Cache Storage，直接浏览缓存内容；③ 检查 Network 面板中标注为 (ServiceWorker) 的请求，确认拦截是否生效；④ 查看 Service Worker 的 console 日志（需在 DevTools 中切换到 SW 上下文）；⑤ 使用 navigator.storage.estimate() 监控存储配额。常见问题包括：缓存键不匹配、Vary 头导致重复缓存、opaque 响应占用过多配额等。
🔧 相关工具