Debug Web Workers with Google Chrome Dev Tools

Mozilla is not the only one improving its web developer tools. Chrome's built-in dev tools have long been the industry standard and still are, for all of Firefox's advances. They're getting better too, Google is boasting about the latest addition, support for debugging Web Workers, a relatively modern invention.

Web Workers are designed to solve the concurrency problem in browsers. JavaScript is a single-threaded language and the Web Workers API was introduced to add real threading to JavaScript by enabling web apps to run multiple scripts in the background independent from each other and by adding a message system for them to work together.

But this big advantage, multi-threading, meaning the ability to run multiple jobs in parallel, is a debugging nightmare since things can go wrong in any of the running jobs. Without appropriate tools, debugging can be tricky. Google thinks it can help.

"Chrome Developer Tools provides full debugging support for scripts running in both dedicated and shared workers," Yury Semikhatsky, software engineer at Google, wrote.

"You can now use the powerful Scripts, Timeline, Profiles and Console panels to develop Web Workers," he said.

"All dedicated workers running in the inspected page are listed in the Scripts panel, under the Workers section. Clicking on a worker URL will open a new Developer Tools window attached to the worker," he explained.

You can isolate a problem with relative ease since you can stop any worker from running, allowing you to identify the one that's causing trouble. 

The tool is useful for shared workers as well, those used by several pages at the same time. You can use the chrome://inspect page to check out all running shared workers. There you'll also find a link next to all of them which launches a Developer Tools window so you can debug them individually.