如何调试网络工作者答案

【问题标题】：How to debug web workers如何调试网络工作者
【发布时间】：2011-01-20 09:27:56
【问题描述】：

我一直在使用 HTML 5 中的网络工作者，并且正在寻找调试它们的方法。理想情况下，类似于 firebug 或 chrome 调试器。有没有人对此有任何好的解决方案。由于无法访问控制台或 DOM，因此很难调试有问题的代码

【问题讨论】：

你有没有试过在你想断点的那一行前加上debugger;？
嗯，重点是firebug和web工具无法访问worker
嗯... Chrome 的 Web Inspector 有一个标签为“脚本”的标签；在此之下，手风琴内有一个标有“Worker Inspectors”的面板，带有一个标有“Debug”的复选框。我不确定它是否有效，但值得一试，是吗？或者你是 100% 认为它不起作用？
最后我检查了它模拟了一个使用 iframe 的工人。但是已经有一段时间了，所以他们有可能改进了一些东西
@JuanMendes，在哪里？截屏。这对共享工作者有用吗？

标签： javascript html google-chrome firebug

【解决方案1】：

Chrome 的 Dev Channel 版本通过注入虚假的工作人员实现来支持工作人员的调试，该实现模拟工作人员在工作人员的客户端页面中使用 iframe 的工作人员。您需要导航到 Scripts 窗格并勾选右侧 Workers 侧边栏上的 Debug 复选框，然后重新加载页面。然后工作脚本将出现在页面脚本列表中。不过，这种模拟有一定的局限性——因为工作脚本将在客户端页面线程中运行，工作中任何长时间运行的操作都会冻结浏览器 UI。

【讨论】：

Chrome 17 是第一个支持 web Worker 调试的版本。
转到chrome://inspect 似乎是最好的选择。它允许您为共享工作者的运行时打开一个控制台。
@AlecHewitt 你是怎么做到的？我找不到那里列出的任何共享工作人员。
火狐͏͏??

【解决方案2】：

作为缺少console.log的快速解决方案，您可以使用throw JSON.stringify({data:data})

【讨论】：

当然，这会因为抛出异常而停止执行调试。
另见 werker.onerror 和相关的。它至少可以很容易地获得回溯。

【解决方案3】：

WebWorker 可以像普通网页一样进行调试。 Chrome 为 WebWorkers 提供调试开发工具：chrome://inspect/#workers

找到想要运行的 webworker 并点击“inspect”。将打开一个单独的开发工具窗口，专门用于该网络工作者。官方instructions值得一看。

【讨论】：

最好多解释你的答案，否则你几乎不可能有用或被接受。
谢谢詹姆斯。细化
网络工作者不是上述答案对我说的，但这很有效，谢谢

【解决方案4】：

从 Chrome 65 开始，您现在可以简单地使用调试器的“步入”功能：

更多详情，请查看他们的release note。

【讨论】：

它不适用于 chrome 83.0.4103.116。我多次按步入（F11）。它只是停留在调用者/postMessage，但不进入被调用者/工作代码
这确实有效如果调用函数是async（注意屏幕截图/视频没有显示为异步..）。否则不会

【解决方案5】：

在 chrome 调试器中，在脚本选项卡中，滚动到工作面板，然后选择启动时暂停。这将允许您调试工作人员，并插入断点。但您在不同的窗口中执行所有这些操作

【讨论】：

火狐͏͏??

【解决方案6】：

与 Chrome v35 中一样

加载您的页面并打开 Chrome 开发者工具。
导航到来源标签。
勾选Pause on Start复选框，如下图：
重新加载页面，调试器将在 web worker 中暂停，但在新窗口中！

编辑：在较新版本的 Chrome 中（我使用的是 v39），工作人员位于“线程”选项卡下，而不是拥有自己的“工作人员”选项卡（如果有任何正在运行的工作人员，线程选项卡将变得可见） .

【讨论】：

无法在 chrome 38 ubuntu 上找到它
也找不到。甚至没有一个名为“Workers”的子面板。
火狐͏͏??

【解决方案7】：

你可以使用 self.console.log('your debugging message')

【讨论】：

【解决方案8】：

接受的答案并不是真正适合所有人的解决方案。

在这种情况下，您可以在 Firefox 的 Web Workers 中使用 console.log 或 console.debug 或 console.error。见Bug #620935 和Bug #1058644。

如果您在 Chrome 中，您可以像调试普通脚本一样调试网络工作者，如果您这样做，console.log 将打印到您的选项卡。但如果您的工作人员是共享工作人员，您可能需要查看chrome://inspect。

额外提示：由于 javascript 新手很难学习 Worker，因此我为它们编写了一个非常轻量级的包装器，为您提供跨两种类型的 Worker 的一致 API。它叫Worker-Exchange。

【讨论】：

非常重要：这些日志不会出现在页面日志中，而是在浏览器控制台中（可通过 ctrl+shift+j 或单击 Web 开发人员工具图标）
@autra，感谢您提醒我这个答案，我刚刚更新了 Chrome 的方法并提到了 Worker-Exchange。
但是您仍然没有解释在 Firefox 中，您应该查看浏览器控制台，而不是 Web 开发人员工具的常规控制台。顺便说一句，不错的 API！你可能想看看github.com/gaia-components/threads，它基本上做同样的事情（除其他外），但也增加了 iframe 支持。

【解决方案9】：

为了调试目的从工作线程获取消息/数据的简单解决方案是在工作线程中使用postMessage() 来传回所需的调试信息。

然后，这些消息可能会在您的父进程'onmessage 处理程序中“捕获”，例如，它可以记录从工作人员传回控制台的消息/数据。这具有非阻塞方法的优点，并允许工作进程作为真正的线程运行并在通常的浏览器环境中进行调试。虽然这样的解决方案无法对工作进程代码进行断点级别检查，但在许多情况下，它提供了在工作进程内根据需要公开尽可能多或尽可能少的数据以帮助调试的能力。

一个简单的实现可能如下所示（显示相关摘录）：

// 在worker的onmessage函数范围内的某个地方（根据需要经常使用）：

postMessage({debug:{message:"This is a debug message"}});

// 在父级的onmessage 处理程序中：

myWorker.onmessage = function(event) {
   if(event.data && event.data.debug) {
      // handle debug message processing here...
      if(event.data.debug.message) {
         console.log("message from worker: %o", event.data.debug.message);
      }
   } else {
      // handle regular message processing here...
   }
};

【讨论】：

【解决方案10】：

在新版本的谷歌浏览器上，只需转到 Deveverloper Tools > Sources（或右键菜单 > Inspect > Sources）。

在Page 左侧面板列表的底部，您会在引擎图标中看到服务工作者。

【讨论】：

【解决方案11】：

除了 JSON.stringify()，还有port.postMessage( (new Object({o: object})) )。也许将它与JSON.stringify 结合使用会更有帮助。

希望这对您有所帮助！

【讨论】：

【解决方案12】：

2016 年 2 月，WebStorm 发布了对 debugging web workers 的支持。

WebStorm JavaScript 调试器现在可以在这些后台工作程序中触发断点。您可以按照习惯的方式浏览框架并探索变量。在左侧的下拉列表中，您可以在工作线程和主应用程序线程之间跳转。

【讨论】：