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
On new versions of Google Chrome just go to Deveverloper Tools
> Sources
(Or Right click menu > Inspect
> Sources
).
At the bottom of the Page
left panel list you'll see the services workers within an engine icon.
Starting with Chrome 65, you can now simply use the "step-in" function of the debugger:
For more details, see their release note.
The accepted answer is not really a solution for everyone.
In that case you can use console.log
or console.debug
or console.error
in Web Workers in Firefox. See Bug #620935 and Bug #1058644.
and If you are in Chrome, You can debug web workers just like you would debug normal scripts, the console.log will print to your tab if you do. But in case your worker is a shared one, you might want to have a look at chrome://inspect
.
Extra Tip: Because Workers are quite difficult to learn for people new to javascript, I've wrote an extremely lightweight wrapper for them that provides you a consistent API across both type of workers. It's called Worker-Exchange.
Dev Channel version of Chrome supports debugging of workers by injecting fake workers implementation that simulates workers using an iframe within worker's client page. You will need to navigate to Scripts pane and tick Debug checkbox on Workers sidebar on the right, then reload the page. The worker script will then appear in the list of page scripts. This simulation has certain limitations, though -- since worker script will run in the client page thread, any long-running operations in worker will freeze the browser UI.
You can use
self.console.log('your debugging message')
in the chrome debugger, in the script tab, scroll to the worker panel, and select pause on start.. it will allow you to debug a worker, and insert break points.. but you do all that in a different window