How to debug web workers

Question

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 solu

Answer 1

As in Chrome v35

• Load your page and open Chrome Developer Tools.
  
  
• Navigate to Sources tab.
  
  

• Check Pause of Start check-box, as shown below:
  
  

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

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).

Answer 2

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

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.

Answer 3

The WebWorker can be debug just like a normal webpage. Chrome provides debugging dev-tools for WebWorkers at: chrome://inspect/#workers

Locate the desired running webworker and click "inspect". A separate dev-tool window will open dedicated to that webworker. The official instructions is worth checking.

Answer 4

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

Hope this was helpful!

Answer 5

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

Answer 6

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.

These messages may then be 'caught' in your parent process' onmessage 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 onmessage function scope (use as often as needed):

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

// In the parent's 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...
   }
};