Tan Li Hau

Debugging Web Workers

May 22, 2019

Web Workers API allows you to start a separate worker thread and receives and execute tasks off the main thread.

Since worker runs in a separate worker thread, how would you debug, ie set breakpoint, console log, and inspect your worker script?

Here’s how you would do it for various major browsers:

Chrome

If you are debugging service worker or worker, you can head down to the console. There’s a dropdown menu, if you haven’t noticed previously, that says “JavaScript context”.

chrome console

chrome console context

For worker context, you would see a cog logo beside the name.

After you choose the worker context, you can type self into the console, and you should see self is an instance of DedicatedWorkerGlobalScope instead of window.

chrome worker context

For shared worker, you would need to go to chrome://inspect/#workers. Select “Shared workers” on the left panel.

chrome shared worker

You would be able to see a list of shared workers if you have any running.

You can click “inspect”, which will open a new console for you to debug.

Firefox

For Firefox, you could go to about:debugging#workers. You will be able to see a list of service workers, and shared workers registered to the browser.

firefox shared worker

Safari

For Safari, you could find the JavaScript context dropdown at the bottom right corner of your console.

safari console context


Thank you for your time reading through this article.
It means a lot to me.

If you like what you have just read,
Tweet about it so I will write more related articles;
If you disagree or you have opinions about this article,
Tweet about it too so I can take your suggestions and improve on it.