blocks|key|1321121|text|作为缺少console.log的快速解决方案，您可以只使用throw+JSON.stringify({data:data})|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1321122|entityMap^0|T|X|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

As a fast solution on the missing console.log, you can just use <code>throw JSON.stringify({data:data})</code>

blocks|key|1321081|text|Dev+Channel版本的Chrome支持通过注入伪worker实现来调试worker，该实现在worker的客户端页面中使用iframe模拟worker。您需要导航到Scripts窗格并勾选右侧Workers侧边栏上的Debug复选框，然后重新加载页面。然后，worker脚本将出现在页面脚本列表中。但是，这种模拟有一定的局限性--由于worker脚本将在客户机页线程中运行，worker中的任何长时间运行的操作都将冻结浏览器UI。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1321082|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1106377|text|从Chrome+65开始，您现在可以简单地使用调试器的“单步执行”功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1106378|​|1106379|📷|atomic|offset|length|1106380|1106381|有关更多详细信息，请参阅他们的release+note。|1106382|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0b5a9ffa56cae9c4e86ffdcab093a36f.gif|imageAlt|1|LINK|MUTABLE|url|https://developers.google.com/web/updates/2018/01/devtools#stepping^0|0|0|0|1|0|0|0|F|C|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@$G|12|H|13|1|14]]|A|$]]|$1|I|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@$G|17|H|18|1|19]]|A|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S|T|-4]]|U|$5|V|P|W|A|$X|Y]]]]

Starting with Chrome 65, you can now simply use the "step-in" function of the debugger:

<a href="https://i.stack.imgur.com/yNA6V.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/yNA6V.gif" alt="enter image description here"></a>

For more details, see their <a href="https://developers.google.com/web/updates/2018/01/devtools#stepping" rel="noreferrer">release note</a>.

blocks|key|1106115|text|在chrome调试器的script选项卡中，滚动到worker面板，然后选择pause+on+start。它将允许您调试worker，并插入断点。但是您可以在不同的窗口中完成所有这些操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1106116|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|1106207|text|您可以使用self.console.log('your+debugging+message')|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1106208|entityMap^0|5|16|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You can use
 <code>self.console.log('your debugging message')</code>

blocks|key|1321275|text|公认的答案并不是真正适合每个人的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1321276|在这种情况下，您可以在Firefox的Web+Workers中使用console.log、console.debug或console.error。参见Bug+#620935和Bug+#1058644。|offset|length|style|CODE|1321277|如果你使用的是Chrome浏览器，你可以像调试普通脚本一样调试web+workers，如果你这样做了，console.log会打印到你的标签上。但是如果你的工作者是一个共享工作者，你可能会想看看chrome://inspect。|1321278|额外提示:由于workers对于javascript的新手来说很难学习，所以我为他们编写了一个非常轻量级的包装器，它为您提供了一个在两种类型的worker中都一致的API。它被称为Worker-Exchange。|1321279|entityMap|0|LINK|mutability|MUTABLE|url|https://bugzilla.mozilla.org/show_bug.cgi?id=620935|1|https://bugzilla.mozilla.org/show_bug.cgi?id=1058644|2|https://github.com/steelbrain/Worker-Exchange^0|0|X|B|19|D|1N|D|23|B|0|2F|C|1|0|2P|G|0|2I|F|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@$D|15|E|16|1|17]|$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@$D|1F|E|1G|1|1H]]|A|$]]|$1|L|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]|V|$5|O|P|Q|A|$R|W]]]]

The accepted answer is not really a solution for everyone.

In that case you can use <code>console.log</code> or <code>console.debug</code> or <code>console.error</code> in Web Workers in Firefox. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=620935" rel="nofollow">Bug #620935</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1058644" rel="nofollow">Bug #1058644</a>.

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 <code>chrome://inspect</code>.

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 <a href="https://github.com/steelbrain/Worker-Exchange" rel="nofollow">Worker-Exchange</a>.

blocks|key|1321340|text|从工作线程访问消息/数据以进行调试的一种简单解决方案是从工作线程中使用postMessage()传回所需的调试信息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1321341|然后，这些消息可以在您的父进程的onmessage处理程序中“捕获”，例如，它可以记录从工作进程传递回控制台的消息/数据。这具有非阻塞方法的优点，允许工作进程作为真正的线程运行，并在通常的浏览器环境中进行调试。虽然这样的解决方案不支持对工作进程代码进行断点级检查，但在许多情况下，它提供了从工作进程中公开所需的尽可能多或尽可能少的数据的能力，以帮助调试。|1321342|一个简单的实现可能如下所示(相关摘录如下所示)：|1321343|//在worker的onmessage函数作用域中的某个地方(根据需要随时使用)：|1321344|postMessage({debug:{message:"This+is+a+debug+message"}});|code-block|syntax|javascript|1321345|//在父级的onmessage处理程序中：|1321346|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:+%25o",+event.data.debug.message);
++++++}
+++}+else+{
++++++//+handle+regular+message+processing+here...
+++}
};|1321347|entityMap^0|Z|D|0|G|9|0|0|A|9|0|0|6|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|16|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|S|3|T|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|U|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|V|$]]

A simple solution to gain access to messages/data from a worker for debugging purposes is to use <code>postMessage()</code> from within your worker thread to pass back the debugging information you want.

These messages may then be 'caught' in your parent process' <code>onmessage</code> handler, 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.

A simple implementation may look like the following (relevant excerpts shown):

// Somewhere in the worker's <code>onmessage</code> function scope (use as often as needed):

<pre><code>postMessage({debug:{message:"This is a debug message"}});
</code></pre>

// In the parent's <code>onmessage</code> handler:

<pre><code>myWorker.onmessage = function(event) {
 if(event.data &amp;&amp; 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...
 }
};
</code></pre>

blocks|key|1321573|text|在新版本的Google+Chrome上，只需转到Deveverloper+Tools+>+Sources+(或者右键单击menu+>+Inspect+>+Sources)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1321574|在Page左侧面板列表的底部，您将看到引擎图标中的服务工作者。|1321575|​|1321576|📷|atomic|1321577|1321578|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a485289d393fd200f42d32accf03f295.png|imageAlt^0|O|I|19|7|1V|7|25|7|0|1|4|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|M|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U|V|-4]]]]

On new versions of Google Chrome just go to <code>Deveverloper Tools</code> &gt; <code>Sources</code> (Or Right click menu &gt; <code>Inspect</code> &gt; <code>Sources</code>).
At the bottom of the <code>Page</code> left panel list you'll see the services workers within an engine icon.
<a href="https://i.stack.imgur.com/enCI4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enCI4.png" alt="Service workers on Chrome 87" /></a>

blocks|key|1321189|text|除了JSON.stringify()之外，还有port.postMessage(+(new+Object({o:+object}))+)。也许将它与JSON.stringify结合使用会更有帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1321190|希望这能对你有所帮助！|1321191|entityMap^0|N|19|22|E|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Beside JSON.stringify(), there's also <code>port.postMessage( (new Object({o: object})) )</code>. Maybe using it in tandem with <code>JSON.stringify</code> will be more helpful.

Hope this was helpful!

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

How to debug web workers

调试器

HTML5

JSON

我一直在与HTML5中的web工作者一起工作，并正在寻找调试他们的方法。理想情况下，像firebug或chrome调试器。有没有人对此有好的解决方案。由于无法访问控制台或DOM，因此很难调试可疑的代码

问如何调试web工作器
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试web工作器EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调试web工作器
EN