Application面板需页面加载完成、使用http/https协议、选对标签和域名才能查看Storage数据；图标位于顶部最右侧，未显示常因页面未加载、file://协议、未切换至Application标签、SPA路由未就绪或扩展干扰；Storage不自动刷新需手动点击⟳；Cache Storage为空说明Service Worker未执行缓存操作。
Application 面板能直接看到 localStorage、sessionStorage、Cache Storage 等真实写入的数据，但必须满足三个前提：页面已加载完成、协议是 http:// 或 https://、你点对了标签和域名。
为什么 Application 标签没出现或 Storage 子项是灰色的
不是 DevTools 坏了，而是它默认不自动聚焦——图标是「一个方块叠着几个小点」，藏在顶部标签栏最右侧；如果看不到，大概率是以下情况之一：
- 页面还没加载完（URL 栏还在转圈），刷新一次再开 DevTools
- 当前地址是
file://协议（比如双击打开的本地 HTML 文件），Storage 和 Service Worker 功能被浏览器禁用 - 你在 Elements 或 Console 标签页里找，根本没切到 Application
- 页面是 SPA，路由未就绪（比如 React Router 还没匹配到页面），导致 Storage 尚未写入
Local Storage / Session Storage 数据不显示或不更新
DevTools 不监听实时变更，调用 localStorage.setItem('token', 'abc123') 后不会自动刷新列表。常见误判场景：
- 没手动点右上角的 ⟳ 刷新按钮，或没按 F5 重载页面
- 误以为
http://localhost:3000和https://localhost:3000是同一个源——它们不是，Storage 数据完全隔离 - iframe 跨源时，主页面 DevTools 看不到子 iframe 的 Storage，得单独打开 iframe 的 URL 调试
- 扩展程序干扰（比如某些隐私插件会拦截 Storage API），可尝试无痕模式复现
Cache Storage 为空，但代码明明用了 caches.open()
Cache Storage 面板只反映 Service Worker 主动执行过 caches.open() + cache.put() 的结果，和 Network 面板里的 from cache 完全无关。
立即学习“前端免费学习笔记（深入）”；
- 即使 SW 已注册并激活，若没在
install或fetch事件中调用缓存逻辑，面板就是空的 - 检查 SW 脚本是否真的执行了缓存操作：在 SW 文件里加一句
console.log('caching assets')，然后看 Console 是否输出 - 确认作用域正确——
navigator.serviceWorker.register('/sw.js', { scope: '/app/' })意味着该 SW 只能访问/app/下的资源，页面在根路径则不会生效
真正容易被忽略的是：Storage 数据的可见性高度依赖“当前上下文”——协议、端口、子域、iframe 边界、甚至是否点了刷新按钮，都会让数据突然“消失”。别急着怀疑代码，先核对这五个点：协议、域名、标签页、刷新动作、作用域。
