Javascript 如何调试web工作人员

我一直在与HTML5中的web工作者合作，并正在寻找调试他们的方法。理想情况下，像firebug或chrome调试器之类的东西。有人有什么好的解决办法吗。由于无法访问控制台或DOM，其难以调试的iffy代码版本Chrome的Dev Channel版本通过在worker的客户端页面中注入模拟使用iframe的worker实现来支持对worker的调试。您需要导航到“脚本”窗格并勾选右侧Workers侧栏上的“调试”复选框，然后重新加载页面。然后，工作脚本将出现在页面脚本列表中。不过，此模拟有一定的局限性-由于worker脚本将在客户端页面线程中运行，worker中的任何长时间运行的操作都将冻结浏览器UI。

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

在chrome调试器中，在脚本选项卡中，滚动到worker面板，然后选择“开始时暂停”。。它将允许您调试工作进程，并插入断点。。但是您可以在不同的窗口中执行所有这些操作，除了JSON.stringify之外，还有port.postMessage新对象{o:Object}。也许将它与JSON.stringify结合使用会更有帮助

希望这是有帮助的

您可以使用 self.console.log'your debug message'

与Chrome v35一样

加载页面并打开Chrome开发者工具

导航到“源”选项卡

选中“启动时暂停”复选框，如下所示：

重新加载页面时，调试器将在web worker中暂停，尽管是在一个新窗口中

---

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

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

---

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

公认的答案并不是每个人都能解决的问题

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

如果您使用Chrome，您可以像调试普通脚本一样调试web workers，如果您这样做，console.log将打印到您的选项卡上。但如果您的员工是共享员工，您可能需要查看chrome://inspect.

---

额外提示：对于不熟悉javascript的人来说，Workers很难学习，因此我为他们编写了一个非常轻量级的包装器，为您提供了跨这两种Worker的一致API。它名为。

2016年2月，WebStorm发布了对的支持

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

---

为了进行调试，从工作线程访问消息/数据的一个简单解决方案是使用工作线程中的postMessage传回所需的调试信息

然后，这些消息可能会在您的父进程“onMessageHandler”中被“捕获”，例如，它可以记录从工作进程传回控制台的消息/数据。这具有非阻塞方法的优点，并允许工作进程作为实际线程运行，并在通常的浏览器环境中进行调试。虽然这样的解决方案不支持工作进程代码的断点级别检查，但在许多情况下，它提供了从工作进程中公开所需数据的能力，以帮助调试

一个简单的实现可能如下所示：

//在worker的onmessage功能范围内的某个位置，根据需要经常使用：

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

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

---

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

---

有关更多详细信息，请参阅新版本Google Chrome上的。

，只需转到Deveverloper工具>源或右键单击菜单>检查>源即可

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

---

您是否尝试添加调试器；在你想中断的行之前？嗯，关键是firebug和web工具无法访问workerUm。。。Chrome的Web检查器有一个标签为“脚本”的选项卡；在那下面，手风琴里面有一个面板，标签是“工人检查员”，有一个复选框，标签是“调试”。我不确定它是否有效，但值得一试，是吗？或者你是一个100%不工作的人？上一次我检查了它，它使用iframe模拟了一个工人。但是已经有一段时间了，所以他们有可能是我

---

改进things@JuanMendes哪里截图。这适用于sharedworkers吗？Chrome 17是第一个支持web Worker调试的版本。转到chrome://inspect 似乎是最好的选择。它允许您为共享工作程序的运行时打开控制台。@AlecHewitt您是如何做到的？我在这里找不到任何列出的共享工作进程。Firefox？当然，这会因为抛出而停止执行调试。另请参阅werker.onerror和关联。它至少让追踪变得非常容易。在chrome 38上找不到它也不可能找到它。甚至没有标题为Workers的子面板。Firefox？最好多解释一下你的答案，否则你就没什么机会有用或被接受了。谢谢James。对于我来说，精心设计的web工作人员并不是上述答案所说的那样，但这非常重要：这些日志不会出现在页面日志中，而是可以通过ctrl+shift+j或单击web开发人员工具在浏览器控制台中使用icon@autra，谢谢你提醒我这个答案，我刚刚更新了Chrome的方法，并提到了Worker-Exchange。但您仍然没有解释在firefox中，您应该使用浏览器控制台，而不是web开发者工具的常规控制台。顺便说一句，很好的API！你可能想看看它在其他浏览器中做的基本相同的事情，但也添加了iframe支持。Firefox？它不适用于Chrome83.0.4103.116。我多次按F11中的步骤。它只保留在调用者/后消息中，但不输入被调用者/工作者代码。如果调用者函数是异步的，则该代码确实有效。注意，屏幕截图/视频未将其显示为异步。否则就不行了

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