在 Safari 16 中调试 Service Worker 需先启用“开发”菜单,确认页面在 HTTPS 或 localhost 下运行并已注册 SW,再通过“开发→显示网页资源→Service Workers”进入调试界面,支持跳过等待、检查 fetch 拦截及手动查询缓存。
在 Safari 16 浏览器中手动开启并调试 Service Worker,需先启用开发者工具、确认当前页面已注册 Service Worker,再通过“开发”菜单进入专用调试界面查看生命周期、缓存状态与 fetch 拦截行为。
打开 Safari 浏览器 → 点击顶部菜单栏「Safari 浏览器」→「设置」→ 切换到「高级」标签页 → 勾选「在菜单栏中显示“开发”菜单」。
这一步必须完成,否则后续所有调试入口均不可见。未勾选时,“开发”菜单完全不会出现在菜单栏中,且无任何提示。
在目标网页中按 Command+Option+I 打开「开发者工具」→ 切换到「控制台」标签页 → 输入 navigator.serviceWorker 并回车。
若返回 ServiceWorkerContainer {…} 对象,说明浏览器支持且页面具备注册条件;若返回 undefined,则 Safari 16 可能运行在不支持的上下文(如文件协议 file://、无 HTTPS 的本地服务器、或禁用服务工作线程的隐私模式)。
【必须使用 HTTPS 或 localhost】 Safari 16 仅允许在安全上下文(HTTPS 或 localhost)中注册和运行 Service Worker,HTTP 站点会静默失败,控制台无错误提示。
在「控制台」中执行以下代码:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(reg => console.log('SW registered:', reg)).catch(err => console.error('SW registration failed:', err)); }
注意:/sw.js 必须是相对于网站根目录的真实可访问路径,且响应头需包含 Content-Type: application/javascript;若路径 404 或 MIME 类型错误,注册会失败但控制台仅输出 generic error,不提示具体原因。
注册成功后,刷新页面 → 再次打开「开发者工具」→ 点击顶部「开发」菜单 → 选择「显示网页资源」→ 在左侧边栏展开「Service Workers」节点。
你会看到当前页面注册的 Service Worker 实例,状态为「Waiting」或「Active」。若处于「Waiting」,点击右侧「Skip Waiting」按钮强制激活。
方法一:在「Service Workers」面板中,勾选「Update on reload」并刷新页面,可强制重新安装最新版脚本。
方法二:点击 Service Worker 条目右侧的「Inspect」链接,将打开一个独立的调试窗口,其控制台输出来自 Service Worker 线程本身(非页面主线程),可直接查看 console.log、拦截的 fetch 事件、cache.put() 结果等。
方法三:在「网络」标签页中,勾选「包括 Service Worker 请求」,即可看到被 Service Worker fetch 事件拦截并响应的所有请求,包括从 Cache Storage 返回的 200(from cache)响应。
注意:Safari 16 不支持「Application」面板中的 Cache Storage 树状浏览,如需查看缓存内容,必须在 Service Worker 调试窗口中手动执行 caches.keys().then(keys => console.log(keys)),再逐个调用 caches.open('name').then(cache => cache.keys().then(reqs => console.log(reqs)))。