直接打开 DevTools（F12 或 Ctrl+Shift+I），切换到 Application → Cache Storage 即可查看真实写入的 Cache API 离线缓存；Network 面板不显示它，因其独立于 HTTP 缓存机制。
直接打开 Chrome 或 Edge 的 DevTools，切换到 Application → Cache Storage 就能看到所有通过 Cache API 缓存的资源——这不是“勾选列表”那种虚的缓存，而是真实写入的、可读可删的离线缓存数据。
怎么进 Cache Storage 面板
按 F12 或 Ctrl+Shift+I（Windows/Linux）/Command+Option+I（macOS）打开 DevTools；左侧活动栏点 Application 标签；如果没看到，点右上角 More tools → Application；展开左侧的 Cache Storage 区域，就能列出当前站点所有已创建的缓存空间。
为什么 Network 面板看不到 Cache API 缓存
Network 面板只显示 HTTP 请求/响应流，包括 memory cache 和 disk cache，但 Cache API 是独立于 HTTP 缓存机制的 JS 层存储；它不走浏览器默认缓存逻辑，也不受 Cache-Control 或 Expires 控制；所以你在 Network 的 Size 列看到 (from cache)，和 Cache Storage 里列出的内容完全无关。
Cache Storage 里点开资源却看不到内容？
常见原因有三个：
立即学习“前端免费学习笔记（深入）”；
- 资源是 POST 请求响应——Cache API 只缓存 GET 成功响应（status 200–299），POST 不会被存入
- Response 对象未被正确构造（比如用
new Response(body, { status: 200 })但body是 null 或 stream 已读尽） - 请求跨域且服务端没返回
Access-Control-Allow-Origin，导致缓存写入失败（但 DevTools 不报错，只留空项）
验证方法：点开某条缓存项后，在下方看 HTTP headers 区域是否有 Status: 200 OK，Preview 标签页能否正常渲染或显示文本。
删错缓存或想清空全部怎么办
别关页面重开——那样只是隐藏，缓存还在：
- 单个资源：在缓存列表中点击它，再点右上角
Delete Selected - 整个缓存：选中缓存名，点
Delete（注意不是删除图标旁的刷新按钮） - 全站清空：在
Application→Storage面板，勾选Cache storage，点Clear site data
特别注意：caches.delete() 在 Service Worker 里调用后，DevTools 的 Cache Storage 面板不会自动刷新，必须手动右键刷新缓存列表或重新加载面板。
