如何调试Web worker

Question

我一直在使用HTML 5中的Web worker，并且正在寻找调试它们的方法。理想情况下像firebug或chrome调试器。有没有人对此有任何好的解决方案。无法访问控制台或DOM，它很难调试iffy代码

Answer 1

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

Answer 2

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

即可

Answer 3

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

找到所需的正在运行的webworker，然后单击＆＃34;检查＆＃34;。将打开一个专门用于该webworker的单独的开发工具窗口。官方[指示] [2]值得检查。

Answer 4

在chrome调试器中，在脚本选项卡中，滚动到工作人员面板，然后选择启动时暂停...它将允许您调试工作人员，并插入断点..但您可以在另一个窗口中执行所有操作

Answer 5

与Chrome v35一样

• 加载您的页面并打开Chrome开发者工具。
  
  
• 导航至来源标签。
  
  

• 选中暂停开始复选框，如下所示：
  
  

• 重新加载页面，调试器将暂停在Web工作者中，但是在新窗口中！

编辑：在较新版本的Chrome中（我使用v39），工作人员处于＆＃34;线程＆＃34; tab而不是拥有自己的＆＃34; Workers＆＃34;选项卡（如果有任何正在运行的工作人员，则“线程”选项卡将变为可见）。

Answer 6

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

有关详情，请参阅release note。

Answer 7

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

Answer 8

接受的答案对每个人来说都不是真正的解决方案。

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

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

额外提示：因为对于刚接触javascript的人来说，工作人员很难学习，所以我为他们写了一个非常轻量级的包装器，它为两种类型的工作者提供了一致的API。它被称为Worker-Exchange。

Answer 9

除了JSON.stringify（）之外，还有port.postMessage( (new Object({o: object})) )。也许与JSON.stringify一起使用它会更有帮助。

希望这有用！

Answer 10

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

  

WebStorm JavaScript调试器现在可以在这些后台工作程序中找到断点。您可以像以前一样浏览框架并探索变量。在左侧的下拉列表中，您可以在工作线程和主应用程序线程之间跳转。

Answer 11

从工作者线程中获取对来自工作者的消息/数据的访问的简单解决方案是使用工作线程中的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...
   }
};

Answer 12

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

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