在浏览器中调试 web worker 代码，最直接的方法是使用开发者工具中的 sources 面板，通过全局搜索文件名或 url 来定位 worker 脚本并设置断点。由于 worker 运行在独立的线程中，其执行上下文与主线程分离，因此需要手动切换当前调试的上下文，或者使用 debugger 语句强制暂停执行。这种方法适用于所有现代浏览器，无需额外配置即可对 worker 内部的逻辑进行单步调试、变量监视和调用栈查看。
如何在 Chrome DevTools 中定位并调试 Worker 脚本？
Chrome 开发者工具的 Sources 面板默认只显示主线程的文件，要调试 Worker，必须通过文件列表查找 Worker 脚本。首先打开 Sources 标签页，在左侧的文件导航树中展开 "Worker" 分组（如果没有看到，可能需要刷新页面或确保 Worker 已启动）。找到对应的 .js 文件后，点击打开，此时你可以像调试普通脚本一样在代码行号旁点击设置断点。当 Worker 执行到断点时，DevTools 会自动暂停，并在右侧显示该 Worker 线程的调用栈和作用域变量。需要注意的是，如果 Worker 是通过 Blob URL 创建的，它通常会显示为 blob:https://... 的形式，同样可以在列表中选中并调试。
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ action: 'process', data: [1, 2, 3] });
// worker.js
self.onmessage = function(e) {
const result = e.data.data.reduce((a, b) => a + b, 0);
self.postMessage(result); // 这里可以设置断点
};
上述代码中，worker.js 是 Worker 的执行脚本。在 Chrome DevTools 的 Sources 面板中，你会看到一个名为 "Worker" 的节点，展开后可以看到 worker.js。点击该行号设置断点后，当 postMessage 触发时，执行流会暂停在该行，你可以在 Scope 面板中查看 e.data 的内容以及局部变量 result 的值。
立即学习“Java免费学习笔记（深入）”；
Firefox DevTools 调试 Worker 有何不同？
Firefox 的开发者工具对 Worker 的支持更加直观，它在 Debugger 面板中自动将 Worker 脚本列在主线程文件之下，无需手动展开特定分组。在 Firefox 中打开 Debugger 标签页，左侧的文件列表会直接显示所有已加载的脚本，包括主线程和所有活跃的 Worker 线程。每个 Worker 脚本旁边会有一个标识符，表明其所属的 Worker ID。设置断点的操作与 Chrome 类似，但 Firefox 允许你更清晰地看到主线程与 Worker 线程之间的消息传递关系。此外，Firefox 的 Console 面板也支持按线程过滤，方便你在调试时区分日志来源。
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ type: 'compute', value: 42 });
// worker.js
self.addEventListener('message', function(e) {
if (e.data.type === 'compute') {
const computed = e.data.value * 2;
self.postMessage(computed); // 在此处设置断点
}
});
在 Firefox 中，加载上述代码后，打开 Debugger 面板，你会在左侧看到 worker.js。点击行号设置断点，当 postMessage 发送数据时，执行会在断点处暂停。此时，你可以在 Call Stack 面板中看到当前的执行上下文，并在 Variables 面板中检查 e.data 和 computed 的值。Firefox 的优势在于其界面布局更紧凑，Worker 脚本与主线程脚本并列展示，便于对比调试。
当 Worker 抛出未捕获异常时如何排查？
如果 Worker 内部发生未捕获的异常，主线程的控制台通常会打印一条错误信息，指出错误发生在哪个 Worker 脚本中。为了深入排查，你可以在 Worker 代码中使用 try...catch 块包裹关键逻辑，或者直接在可能出错的行设置断点。当异常发生时，DevTools 会暂停执行并高亮显示出错的那一行代码，同时在 Console 面板中显示详细的错误堆栈。对于动态生成的 Worker（如通过 Blob URL），确保在创建时指定了正确的 MIME 类型，否则可能导致脚本无法加载或执行失败，从而无法正确调试。
