application面板打不开需先确认页面加载完成且devtools已激活；其标签位于顶部最右侧，图标为“方块叠小点”，若未显示可能是页面未触发存储行为、协议为file://或spa路由未就绪。
Application 面板打不开？先确认页面加载完成且 DevTools 已激活
按 F12 或 Ctrl + Shift + I（Windows/Linux）/ Cmd + Option + I（Mac）打开 DevTools 后，Application 面板默认不自动聚焦——它藏在顶部标签栏最右侧，图标是「一个方块叠着几个小点」。如果没看到，说明当前页面可能没触发任何存储或 Service Worker 行为，或者页面还没完成加载（比如 SPA 路由未就绪）。刷新一次页面再试；若仍不显示，检查地址栏是否是 http:// 或 https:// 协议（file:// 协议下多数 Storage 和 SW 功能被禁用）。
Local Storage / Session Storage 数据不更新？别忘了手动刷新面板
你在代码里调用了 localStorage.setItem('theme', 'dark')，但 Application → Local Storage 下没看到新条目？这不是 bug，而是 DevTools 不监听实时变更。必须点击面板右上角的 ⟳ 刷新按钮，或按 F5 重载整个页面，才能同步最新状态。Session Storage 同理，且只对当前标签页生效——新开一个标签页访问同一 URL，sessionStorage 是空的，别误以为数据丢了。
Service Worker 没出现在 Application → Service Workers？检查注册时机和作用域
Application 面板的 Service Workers 栏为空，常见原因有三个：
-
navigator.serviceWorker.register()调用失败：控制台是否有Uncaught (in promise) DOMException: Failed to register a ServiceWorker？通常因脚本路径错误（比如注册了/sw.js，但实际文件在/dist/sw.js）或 HTTPS 缺失（本地开发可用localhost，但非localhost的 HTTP 域名不支持 SW） - 作用域越界：注册时传了
{ scope: '/admin/' }，但当前页面 URL 是/dashboard/，SW 就不会激活 - 已注册但未激活：看
chrome://serviceworker-internals/页面，能查到所有注册记录，包括waiting状态的 SW——此时需手动点击Skip Waiting或触发页面重载两次
Cache Storage 里啥都没有？确认 Service Worker 真正调用了 cache API
Cache Storage 不是自动填充的，它只反映 Service Worker 主动调用 caches.open()、cache.put() 后写入的内容。即使 SW 已激活，若代码里没写缓存逻辑（比如漏了 event.respondWith(caches.match(...))），这个面板就始终为空。调试时可临时在 SW 文件中加一句：
self.addEventListener('install', event => {
event.waitUntil(
caches.open('test-v1').then(cache => cache.addAll(['/index.html']))
);
});
然后强制刷新页面，再进 Application → Cache Storage 就能看到 test-v1 缓存及其中的资源。
最容易被忽略的是：Application 面板里的所有存储项（包括 IndexedDB、Cache Storage）都按「协议 + 域名 + 端口」隔离。localhost:3000 和 localhost:3001 是两个完全独立的存储空间，切端口后记得重新检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
