If you develop for any Web browser, especially if you code in HTML5, you might be familiar with Web Workers. If so, you also might realize that it can be pretty challenging to debug. Google has now introduced new support for Web Workers debugging in its Chrome Developer Tools.
As part of the new tools, you can use the scripts, timeline, profiles and consoles panels to develop for Web Workers. As far as debugging goes, there is now full support for dedicated and shared workers. There is a difference between the two that the Chrome team discusses.
First up is the dedicated worker. All of them will be listed in the scripts panel, under the workers section. From there, you can open a new Developer Tools window that’s attached to the worker URL. If you find that something is amiss, you can pause the workers on start. All starting dedicated workers will now suspend operation before they can start chugging away. From here, you can jump in and see what’s wrong if there’s a cause for concern.
The other workers, known as shared workers, are independent in that they can be used more than once on several pages. You can find these workers by using the chrome://inspect page. Next to each worker listed is an inspect and terminate URL. Clicking on inspect will open the Developer Tools to start the debugging process. If you just want it gone, click terminate to kill the worker.
Another option available is to debug a shared worker initialization. You can do this by terminating the current worker while leaving the debug tools open. From there, reload one of the worker clients. The Developer Tools window will automatically re-attach to the new client.
Google has some documentation up on the matter that should help you get started on debugging some Web Workers. If you need Developer Tools, you can obtain them through the dev channel release of Chrome.