如何调试网络工作者

我一直在与HTML 5的网络工作者一起工作，并且正在寻找调试它们的方法。理想情况下，例如萤火虫或Chrome调试器。有没有人对此有任何好的解决方案。无法访问控制台或DOM，很难调试这些代码

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

Chrome的开发通道版本通过注入伪造的工作实现来支持工的调试，该实作使用工的客户端页面中的iframe来模拟工。您将需要导航到“脚本”窗格，然后在右侧的Workers侧边栏中选中Debug复选框，然后重新加载页面。然后，工作脚本将出现在页面脚本列表中。但是，此模拟有一定的局限性-由于工作脚本将在客户端页面线程中运行，因此工作程序中任何长时间运行的操作都将冻结浏览器UI。

可以像正常网页一样调试WebWorker。Chrome在以下网址为WebWorkers提供了调试开发工具：chrome：// inspect /＃workers

找到所需的正在运行的Webworker，然后单击“检查”。将打开一个专用于该Webworker的单独的开发工具窗口。官方说明值得检查。

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

有关更多详细信息，请参见其发行说明。

在chrome调试器中，在脚本选项卡中，滚动到工作面板，然后选择启动时暂停。这将允许您调试工作器并插入断点。但是您可以在其他窗口中进行所有操作

如在Chrome v35中

• 加载页面并打开Chrome开发者工具。
  
  
• 导航到“源”选项卡。
  
  

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

• 重新加载页面，调试器将在Web Worker中暂停，尽管在新窗口中！

编辑：在较新版本的Chrome（我使用v39）中，工作程序位于“线程”选项卡下，而不是具有自己的“工作程序”选项卡（如果有正在运行的工作程序，则“线程”选项卡将变为可见）。

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

公认的答案并不是每个人的解决方案。

在这种情况下，你可以使用console.log或console.debug或console.error在Firefox中的Web工人。请参阅错误＃620935和错误＃1058644。

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

额外提示：因为对于刚接触javascript的人员来说，Workers很难学习，所以我为他们编写了一个非常轻巧的包装器，为您提供了适用于这两种类型的Workers的一致API。称为Worker-Exchange。

2016年2月，WebStorm发布了调试Web Worker的支持。

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

一种用于调试目的而从工作程序访问消息/数据的简单解决方案是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...
   }
};

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

希望这对您有所帮助！

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

在Page左面板列表的底部，您将在引擎图标中看到服务人员。