How to debug web workers

Question

I work with web workers in HTML 5 and look for ways to debug them. Ideally, something like firebug or chrome debuggers. Anyone have a good solution. without access to the console or DOM, which makes it difficult to debug iffy code

Answer 1

As a quick fix on the missing console.log, you can simply use throw JSON.stringify({data:data})

Answer 2

The Dev Channel version of Chrome supports worker debugging by introducing a fake worker implementation that mimics workers using an iframe on a work client page. You will need to go to the "Scripts" panel and check the "Debug" box on the side panel "Workers" on the right, and then reload the page. Then the working script will appear in the list of page scripts. This simulation has certain limitations, although since the working script will be launched in the client page thread, any lengthy operations in the working mode will freeze the browser user interface.

Answer 3

in the chrome debugger, on the script tab, select the working panel and select a pause at startup. This will allow you to debug the worker and insert breakpoints .. but you do it all in another window

Answer 4

WebWorker can be debugged like a regular web page. Chrome provides debugging tools for WebWorkers in chrome: // inspect / # workers .

Find the web artist you want and click check. A separate developer window opens dedicated to this web tool. The official [instructions] [2] merit verification.

Answer 5

Like Chrome v35

• Upload your page and open the Chrome Developer Tools.
  
  
• Click the Sources tab.
  
  

• Check Check Pause of Start as shown below:
  
  

• Reload the page, the debugger will pause the web worker, but in a new window!

Edit: in newer versions of Chrome (I use v39), workers are on the Themes tab, instead of having their own Workers tab (Themes tab will become visible if there are working workers).

Answer 6

You can use self.console.log('your debugging message')

Answer 7

The accepted answer is not really a solution for everyone.

In this case, you can use console.log or console.debug or console.error in Web Workers in Firefox. See Error # 620935 and Error # 1058644 .

and if you are in Chrome, you can debug web workers the same way you debug regular scripts, the .log console will print to your tab if you do. But if your worker is generic, you can take a look at chrome://inspect .

Extra tip. Since it is difficult for difficult people to master new users for javascript, I wrote an extremely lightweight shell for them that provides you with a consistent API for both types of workers. It is called Worker-Exchange .

Answer 8

Next to JSON.stringify () there is also port.postMessage( (new Object({o: object})) ) . Perhaps using it in tandem with JSON.stringify would be more useful.

Hope this was helpful!

Answer 9

In February 2016, WebStorm released debugging support for web workers .

The WebStorm JavaScript debugger can now hit breakpoints inside these background workers. You can go through the frames and explore the variables just as you used. In the drop-down list on the left, you can move between workflows and the main application thread.

Answer 10

A simple solution for accessing messages / data from a worker for debugging purposes is to use postMessage() from your workflow to pass the required debugging information.

These messages can then be "caught" in the handler of the parent onmessage process, which can, for example, log messages / data transferred from the worker to the console. This has the advantage of being a non-blocking approach and allowing workflows to work like real threads and debug in a normal browser environment. While this solution does not include checking the workflow level of the workflow at the breakpoint level, in many situations it provides the ability to display as much or as little data from the workflow as possible to aid in debugging.

A simple implementation might look like this (corresponding excerpts):

// Somewhere in the working onmessage working onmessage (use as often as possible):

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

// In the parent onmessage handler:

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