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 solution to this. with no access to the console or DOM its kind of hard to debug iffy code
With chrome, you can navigate to chrome://inspect/#workers. Chrome inspect web workers. There you go, you have the developer tools in the context of the WebWorker. Now you can debug the scripts or see what is going on in the network tab.
For shared worker, you would need to go to chrome://inspect/#workers. Select "Shared workers" on the left panel. 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.
If you want to debug it, you should press F12 on Chrome to open the developer mode. You can see that the JS code of the current page is under the Source menu, you can set a breakpoint directly at the beginning of the script. Then you can click on the UI button or menu to start debugging(both js and backend activity ).
Unlike web workers, service workers allow you to intercept network requests (via the fetch event) and to listen for Push API events in the background (via the push event). A page can spawn multiple web workers, but a single service worker controls all the active tabs under the scope it was registered with.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With