调试 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），而非语法本身
