如何调试网络工作者

小开

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

小开

最佳答案

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

小开

在 chrome 调试器中，在 script 选项卡中，滚动到工作面板，并选择启动时的暂停。.它将允许您调试辅助程序，并插入断点。.但你在不同的时间段做这些事

小开

除了 JSON.stringify ()之外，还有 port.postMessage( (new Object({o: object})) )。

希望这对你有帮助！

小开

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

小开

就像 Chrome v35

加载页面并打开 Chrome 开发工具。
导航到 消息来源选项卡。
选中 开始暂停复选框，如下所示: < br/> < br/>
重新加载页面，调试器将暂停在网络工作者，虽然在一个新的窗口！

编辑: 在新版本的 Chrome 中(我使用的是 v39) ，工作人员在“ Threads”选项卡下，而不是在他们自己的“ Workers”选项卡下(如果有任何正在运行的工作人员，Threads 选项卡将变得可见)。

小开

WebWorker 可以像普通网页一样进行调试，Chrome 为 WebWorker 提供了调试开发工具: 铬合金://检查/# 工人

找到所需的运行 webworker，然后点击“检查”。一个单独的 dev-tool 窗口将专门为该 webworker 打开。官方的指示值得一查。

小开

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

在这种情况下，您可以在 Firefox 中的 Web Workers 中使用 console.log、 console.debug或 console.error。

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

额外的提示: 由于 Workers 对于新接触 javascript 的人来说很难学习，所以我为他们编写了一个非常轻量级的包装器，它为您提供了跨两种类型的 worker 的一致 API。叫做工人交流。

小开

2016年2月，WebStorm 发布了对调试 web 工作者的支持。

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...
}
};

小开

从 Chrome 65开始，你现在可以简单地使用调试器的“ step-in”功能:

有关详细信息，请参阅其释放通知书。

小开

在新版本的谷歌浏览器上，只需点击 Deveverloper Tools > Sources(或者右击菜单 > Inspect > Sources)。

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