Debugging Web Workers

Resource tab

If a webpage uses web workers, each has their own top-level tree element named after the initial script used to launch it. Resources loaded by the web worker are listed as child tree elements under the worker.

Subframes are located in the Frames folder, if applicable. Resources used by subframes are grouped under the Frame tree element, rather than in top-level folders.

Debugger tab

Web workers are shown when the debugger pauses. When the debugger pauses in the main page or in a worker, all contexts are also paused at the next line of JavaScript to be executed. These page and worker contexts are shown as top-level tree elements in the Call Stack section in the left sidebar.

You can use stepping commands for a single worker only by selecting a call frame within the worker context. Clicking the Continue button in the left sidebar resumes all contexts regardless of which call frame is selected.

When the debugger is paused, a Pause Reason section appears at the top of the left sidebar, listing what caused the debugger to pause, such as a breakpoint, debugger statement, or uncaught exception. If the debugger paused due to hitting a breakpoint that was unexpected, you can quickly turn off the current breakpoint by clicking the blue wedge next to the Pause Reason text. Lastly, regardless of where you navigate while the debugger is paused, you can always return to the original pause location by clicking the jump arrow to the right of the Pause Reason header.

Console tab

A small menu appears in the lower-right corner of the console bar if your web content has multiple execution contexts, like subframes or workers. This is called the execution context picker. If you click this menu, you can change the execution context for a console command.