调试 Web Worker 异步代码需在 Worker 内设断点、用带时间戳的 console.log 追踪、监听 unhandledrejection 并上报错误，必要时用主线程代理复现问题。

调试 Web Worker 中的异步代码，关键在于突破主线程与 Worker 线程的隔离限制，把断点、日志和错误追踪真正落到 Worker 内部执行上下文中。

在 Worker 文件中直接加断点

现代浏览器（Chrome、Edge、Firefox）支持直接在 Worker 脚本中设置断点。确保 Worker 是通过 new Worker('./worker.js') 加载的本地文件（非内联或 Blob URL），否则 DevTools 可能无法正确映射源码。

• 打开 DevTools → Sources 面板 → 在左侧面板展开 “Workers” 节点，找到对应 Worker 实例（如 worker.js (worker)）
• 点击文件名打开源码，在 fetch()、async/await 或 Promise 回调内部单击行号左侧设断点
• 断点会在线程实际执行到该行时暂停，可查看作用域变量、调用栈和异步任务队列状态

用 console.log + 时间戳辅助追踪异步流程

Worker 中的 console.log 输出会显示在 DevTools 的 Console 面板，但默认归类为 “Worker” 类型。开启 “Show all” 或筛选 “Worker” 可集中查看。

• 避免只写 console.log('done')，改用带标识和时间戳的格式：console.log('[Worker] fetch start:', Date.now())
• 对 Promise 链每个关键节点都打点，例如 .then(res => { console.log('[Worker] got response'); return res.json(); })
• 注意：console.time() 和 console.timeEnd() 在 Worker 中可用，适合测量异步操作耗时

捕获并上报 Worker 内部未处理的 Promise 拒绝

Worker 中未被 catch() 的 Promise rejection 不会触发页面全局的 unhandledrejection，需主动监听。

• 在 Worker 脚本顶部添加：self.addEventListener('unhandledrejection', e => { console.error('Unhandled rejection in worker:', e.reason); });
• 结合 try/catch 包裹 await 表达式，或统一用 .catch() 处理链式 Promise 错误
• 可将错误信息通过 postMessage() 发送给主线程，便于集中记录或告警：self.postMessage({ type: 'error', msg: e.message });

用主线程代理调试复杂异步逻辑

当 Worker 内部逻辑过于嵌套或依赖外部环境（如 IndexedDB、Cache API），可在主线程模拟相同调用路径，复现问题。

• 提取 Worker 中核心异步函数（如 async function fetchData(url) { ... }）为独立模块，同时供 Worker 和测试页面导入
• 在页面中调用同一函数，利用主线程更完善的调试能力（如异步堆栈追踪、Async Call Stack）定位问题根源
• 确认逻辑无误后，再移回 Worker 执行——多数异步行为差异来自执行上下文（如无 DOM、无 window），而非语法本身