Chrome和Edge的DevTools不提供SharedWorker独立调试面板，但可通过Sources定位脚本、Console切换shared_worker上下文查看日志、代码注入监听port通信、Network检查加载与CORS、Application管理实例等方式组合调试。
Chrome 和 Edge 浏览器的开发者工具（DevTools）目前不直接支持 SharedWorker 的独立调试面板，但可通过组合技巧定位问题、查看日志、检查通信和生命周期。关键在于理解 SharedWorker 的运行上下文与主线程/其他 Worker 的隔离性。
在 Sources 面板中定位 SharedWorker 脚本
SharedWorker 的脚本文件（如 worker.js）会出现在 Sources → Page 选项卡下，路径通常为 top > your-domain.com > worker.js。它不会像普通 JS 文件那样显示在“Filesystem”或“Content scripts”中，需手动刷新页面并留意加载顺序。
- 确保 SharedWorker 构造时传入的脚本路径是相对当前页面的绝对路径（如
new SharedWorker('js/worker.js')），否则 DevTools 可能无法正确映射源码 - 若使用构建工具（如 Webpack/Vite），开启
devtool: 'source-map'并确认 sourcemap 被正确注入且 MIME 类型为application/json - 在脚本中加
debugger;语句，刷新页面后可在 Sources 面板中断点停住——注意：该断点仅在首个连接建立时触发（即 SharedWorker 初始化阶段）
通过 Console 查看 SharedWorker 输出日志
SharedWorker 内部的 console.log()、console.error() 默认不会显示在页面 Console 中，但可在 DevTools 的 Console 面板顶部下拉菜单里选择 shared_worker 上下文（Chrome 115+ / Edge 115+ 支持）。
- 打开 DevTools → Console → 点击左上角环境切换按钮（图标为两个重叠方块）→ 选择
shared_worker (worker.js) - 若未出现该选项，说明 SharedWorker 尚未启动（需至少一个页面调用
new SharedWorker()并完成连接）或已被终止（所有端口关闭后自动销毁） - 可主动在 SharedWorker 中写入
self.console.log('init')验证是否进入执行流程
监听 port 消息与连接状态
SharedWorker 生命周期依赖 connect 事件和 port 对象通信。无法直接查看所有活跃端口，但可通过代码注入方式辅助观测：
立即学习“前端免费学习笔记（深入）”；
- 在 SharedWorker 脚本中维护一个
ports = new Set()，在onconnect中添加，在port.onclose或port.close()后删除，并定期console.log('active ports:', ports.size) - 对每个
port绑定onmessage时，打印消息来源（例如console.log('[FROM]', e.ports[0].name || 'unknown', e.data)） - 主线程中可通过
worker.port.onmessage接收响应，配合console.timeStamp()对齐时间线，排查延迟或丢失消息
Network 与 Application 面板的辅助作用
SharedWorker 脚本本身作为资源出现在 Network 面板（过滤 worker 或 js），可检查加载状态、HTTP 头（如 Content-Type: application/javascript 必须正确）、CORS 是否阻断（跨域 SharedWorker 不被允许）。
- Application → Service Workers 页面不显示 SharedWorker，但它会出现在 Application → Clear storage → “Workers” 清单中（Chrome 120+）
- 强制刷新（Ctrl+F5）或关闭所有同源标签页后重新打开，可复位 SharedWorker 实例，用于验证是否因旧实例残留导致行为异常
- 禁用缓存（Network 面板勾选 “Disable cache”）有助于确保每次加载最新版 SharedWorker 脚本
