Javascript 如何调试 Web Worker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2323778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to debug web workers
提问by Zachary K
I have been working with web workers in HTML 5 and am looking for ways to debug them. Ideally something like the firebug or chrome debuggers. Does anyone have any good solution to this. with no access to the console or DOM its kind of hard to debug iffy code
我一直在与 HTML 5 中的网络工作者一起工作，并且正在寻找调试它们的方法。理想情况下，类似于 firebug 或 chrome 调试器。有没有人对此有任何好的解决方案。无法访问控制台或 DOM，很难调试 iffy 代码
采纳答案by daralthus
As a fast solution on the missing console.log, you can just use throw JSON.stringify({data:data})
作为缺少console.log的快速解决方案，您可以使用 throw JSON.stringify({data:data})
回答by caseq
Dev Channel version of Chrome supports debugging of workers by injecting fake workers implementation that simulates workers using an iframe within worker's client page. You will need to navigate to Scripts pane and tick Debug checkbox on Workers sidebar on the right, then reload the page. The worker script will then appear in the list of page scripts. This simulation has certain limitations, though -- since worker script will run in the client page thread, any long-running operations in worker will freeze the browser UI.
Chrome 的 Dev Channel 版本通过注入假的工作人员实现来支持工作人员的调试，这些工作人员使用工作人员的客户端页面中的 iframe 来模拟工作人员。您需要导航到 Scripts 窗格并勾选右侧 Workers 侧边栏上的 Debug 复选框，然后重新加载页面。工作脚本随后将出现在页面脚本列表中。不过，这种模拟有一定的局限性——因为工作脚本将在客户端页面线程中运行，工作中的任何长时间运行的操作都会冻结浏览器 UI。
回答by user2519809
The WebWorker can be debug just like a normal webpage. Chrome provides debugging dev-tools for WebWorkers at chrome://inspect/#workers.
WebWorker 可以像普通网页一样进行调试。Chrome 在chrome://inspect/#workers为 WebWorkers 提供调试开发工具。
Locate the desired running webworker and click "inspect". A separate dev-tool window will open dedicated to that webworker. The official [instructions][2] is worth checking.
找到所需运行的 webworker，然后单击“检查”。一个单独的开发工具窗口将打开专供该网络工作者使用。官方[说明][2]值得一看。
回答by Philipp Cla?en
Starting with Chrome 65, you can now simply use the "step-in" function of the debugger:
从 Chrome 65 开始，您现在可以简单地使用调试器的“介入”功能：
For more details, see their release note.
有关更多详细信息，请参阅他们的发行说明。
回答by Ashwin Aggarwal
As in Chrome v35
就像在 Chrome v35 中一样
- Load your page and open Chrome Developer Tools.
- Navigate to Sourcestab.
Check Pause of Startcheck-box, as shown below:
Reload the page, the debugger will pause in the web worker, though in a new window!
- 加载您的页面并打开 Chrome 开发者工具。
- 导航到源选项卡。
勾选Pause of Start复选框，如下图：
重新加载页面，调试器将在 web worker 中暂停，但在新窗口中！
Edit: in newer versions of Chrome (I'm using v39), the workers are under a "Threads" tab instead of having their own "Workers" tab (The Threads tab will become visible if there are any running workers).
编辑：在较新版本的 Chrome（我使用的是 v39）中，工作人员位于“线程”选项卡下，而不是拥有自己的“工作人员”选项卡（如果有任何正在运行的工作人员，则“线程”选项卡将变得可见）。
回答by zeacuss
in the chrome debugger, in the script tab, scroll to the worker panel, and select pause on start.. it will allow you to debug a worker, and insert break points.. but you do all that in a different window
在 chrome 调试器中，在脚本选项卡中，滚动到工作器面板，然后选择启动时暂停..这将允许您调试工作器，并插入断点..但您在不同的窗口中执行所有操作
回答by Harshit Jain
You can use
self.console.log('your debugging message')
您可以使用
self.console.log('your debugging message')
回答by Steel Brain
The accepted answer is not really a solution for everyone.
接受的答案并不是每个人的真正解决方案。
In that case you can use console.logor console.debugor console.errorin Web Workers in Firefox. See Bug #620935and Bug #1058644.
在这种情况下，你可以使用console.log或console.debug或console.error在Firefox中的Web工人。请参阅错误 #620935和错误 #1058644。
and If you are in Chrome, You can debug web workers just like you would debug normal scripts, the console.log will print to your tab if you do. But in case your worker is a shared one, you might want to have a look at chrome://inspect.
如果你在 Chrome 中，你可以像调试普通脚本一样调试 web workers，如果你这样做，console.log 会打印到你的选项卡上。但是，如果您的工作人员是共享工作人员，您可能需要查看chrome://inspect.
Extra Tip: Because Workers are quite difficult to learn for people new to javascript, I've wrote an extremely lightweight wrapper for them that provides you a consistent API across both type of workers. It's called Worker-Exchange.
额外提示：因为对于 JavaScript 新手来说，Worker 很难学习，所以我为它们编写了一个非常轻量级的包装器，为您提供跨两种类型的 Worker 的一致 API。它被称为Worker-Exchange。
回答by Dan Dascalescu
In February 2016, WebStorm released support for debugging web workers.
2016 年 2 月，WebStorm 发布了对调试 WebWorkers 的支持。
WebStorm JavaScript debugger can now hit breakpoints inside these background workers. You can go through the frames and explore variables the same way as you're used to. In the drop-down list on the left you can jump between the workers' threads and the main application thread.
WebStorm JavaScript 调试器现在可以在这些后台工作程序中触发断点。您可以像以往一样浏览框架并探索变量。在左侧的下拉列表中，您可以在工作线程和主应用程序线程之间跳转。
回答by bluebinary
A simple solution to gain access to messages/data from a worker for debugging purposes is to use postMessage()from within your worker thread to pass back the debugging information you want.
为了调试目的而postMessage()从工作线程访问消息/数据的一个简单解决方案是在工作线程内使用来传回所需的调试信息。
These messages may then be 'caught' in your parent process' onmessagehandler, which could for instance log the messages/data passed back from the worker to the console. This has the advantage of being a non-blocking approach and allows for worker processes to run as real threads and to be debugged within the usual browser environment. While a solution like this doesn't enable breakpoint-level inspection of worker process code, for many situations, it offers the ability to expose as much or as little data as needed from within a worker process to aid in debugging.
然后，这些消息可能会在您的父进程onmessage处理程序中被“捕获”，例如，它可以记录从工作进程传回控制台的消息/数据。这具有作为非阻塞方法的优点，并允许工作进程作为真正的线程运行并在通常的浏览器环境中进行调试。虽然像这样的解决方案不能对工作进程代码进行断点级检查，但在许多情况下，它提供了从工作进程中根据需要公开尽可能多或尽可能少的数据以帮助调试的能力。
A simple implementation may look like the following (relevant excerpts shown):
一个简单的实现可能如下所示（显示相关摘录）：
// Somewhere in the worker's onmessagefunction scope (use as often as needed):
// 在 workeronmessage函数范围内的某处（根据需要经常使用）：
postMessage({debug:{message:"This is a debug message"}});
// In the parent's onmessagehandler:
// 在父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...
}
};
