想在 Safari 16 上调试 Service Worker，得先走几步前置操作。

首先打开 Safari 的“开发”菜单，确保你的页面跑在 HTTPS 或 localhost 下，而且已经注册了 SW。

然后通过“开发 → 显示网页资源 → Service Workers”进入调试界面。

这里可以跳过等待、检查 fetch 拦截，甚至手动查询缓存。

整个过程其实很直观：启用开发者工具、确认页面已注册 Service Worker，再通过“开发”菜单进入专用调试界面，就能监控生命周期、缓存状态和 fetch 拦截行为。

启用 Safari 开发者菜单

打开 Safari 浏览器，点击顶部菜单栏「Safari 浏览器」→「设置」，切换到「高级」标签页。

然后勾选「在菜单栏中显示“开发”菜单」。

注意：这一步是必须完成的。 否则后续所有调试入口都看不到——未勾选时，“开发”菜单根本不会出现在菜单栏里，而且没有任何提示，容易让人摸不着头脑。

确保网页已注册 Service Worker

在目标网页上按 Command+Option+I 打开「开发者工具」，切换到「控制台」标签页。

输入 na vigator.serviceWorker 并回车。

如果返回的是一个 ServiceWorkerContainer {…} 对象，说明浏览器支持且页面具备注册条件。

如果返回的是 undefined，那就要小心了——Safari 16 可能运行在不支持的上下文里，比如：

• 文件协议（file://）
• 没有 HTTPS 的本地服务器
• 禁用了服务工作线程的隐私模式

【必须使用 HTTPS 或 localhost】 这里就体现出一个细节：Safari 16 只允许在安全上下文（HTTPS 或 localhost）中注册和运行 Service Worker。 HTTP 站点会悄无声息地失败，控制台没有任何错误提示，这很容易让人以为是代码出了问题。

手动触发 Service Worker 安装与激活

在「控制台」里执行下面这段代码：

if ('serviceWorker' in na vigator) { na vigator.serviceWorker.register('/sw.js').then(reg => console.log('SW registered:', reg)).catch(err => console.error('SW registration failed:', err)); }

需要注意：/sw.js 这个路径必须是相对于网站根目录的真实可访问路径，而且响应头要包含 Content-Type: application/ja vascript。

如果路径返回 404，或者 MIME 类型搞错了，注册就会失败——但控制台只会输出一个泛泛的错误，不会告诉你具体原因。

注册成功后，刷新页面，再次打开「开发者工具」，点击顶部「开发」菜单，选择「显示网页资源」。

在左侧边栏展开「Service Workers」节点。这时就能看到当前页面注册的 Service Worker 实例了，状态显示为「Waiting」或「Active」。如果是「Waiting」，点击右侧的「Skip Waiting」按钮就能强制激活。

调试 Service Worker 运行时行为

这里有几种方法可以试试：

• 方法一：在「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))) 来查看细节。虽然有点麻烦，但总归是能用的。

《夸克》非常好用的免费AI浏览器

下载APP查看