Web Inspector ReferenceSources Tab

The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like XMLHttpRequest or fetch.

Organizing Resources

By default, resources are organized By Type, which places resources of similar type (e.g. Documents, Images, Style Sheets, etc.), but only if there are so many resources that it would be confusing to navigate as a flat list.
It’s possible to switch the organization to be By Path, which instead creates a hierarchy of folders that match the path of each resource.


When organizing By Path, each origin is listed at the top-level, instead of in a Frames folder nested under the main resource.

Filtering Resources

The filter bar in the bottom of the navigation sidebar will show/hide resources based on whether the given search string exists in the URL of that resource.

When enabled, will hide all resources that do not have any warnings or errors (including those created by console functions).

If the resource type selector is not set to All, only resources that match the selected type (e.g. Documents, Images, Style Sheets, etc.) will be shown.

Understanding Resources

In addition to being able to view the response content of the resource, Web Inspector also supports showing request data (assuming it exists), and will also show alternate representations of the content where applicable.

  • If the request data or response content is JSON parseable, an object tree view is made available as if the contents had been logged to the Console.
  • If the request data or response content is valid XML (including HTML and SVG), a DOM tree view is made available as if the contents had been shown in the Elements Tab.

Additional information about the resource is also shown in the Resource panel in the details sidebar, such as MIME type and request/response headers.

Creating Inspector Resources

In addition to showing resources loaded by the inspected target, Web Inspector also has three different types of resources that can be created:

  • Local Override… can be used to replace the content and headers of any network response, based on URL, so long as Web Inspector is open.
  • Inspector Bootstrap Script is a special JavaScript snippet that is guaranteed to evaluate before any other JavaScript in any page, as well as any sub-frames, so long as Web Inspector is open.
  • Inspector Style Sheet is a special <style> that is created by Web Inspector and silently added to the inspected page.
    • One Inspector Style Sheet can be created per frame.
    • Each Inspector Style Sheet is nested underneath its owner frame in the resource tree.
    • When adding new CSS rules in the Elements Tab, if there is not already an Inspector Style Sheet for the owner frame, one is automatically created.
    • Inspector Style Sheet are not preserved across navigations or between Web Inspector sessions.

Debugging JavaScript

At the top of the navigation sidebar, there are some clickable icons that control the JavaScript debugger:

  • is shown when breakpoints are globally enabled. Clicking it will globally disable breakpoints.
  • is shown when breakpoints are globally disabled. Clicking it will globally enable breakpoints.
  • is shown when JavaScript execution is not paused. Clicking it will tell the JavaScript debugger to pause JavaScript execution on the next statement.
  • is shown when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution.
  • is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the next statement to be executed.
  • is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the first statement inside the function that is about to be executed. If there is no such function, clicking it will behave just like .
  • is always shown, but only enabled when JavaScript execution is paused. Clicking it will tell the JavaScript debugger to resume JavaScript execution, and then pause JavaScript execution on the first statement to be executed after leaving the current function. If there is no parent function, clicking it will be behave just like .

Below these icons is the Breakpoints section, which contains all existing JavaScript breakpoints, event breakpoints, DOM breakpoints, and URL breakpoints, as well as a that allows new ones to be created.

When JavaScript execution is paused, additional sections are added to the navigation sidebar that contain information about the current Pause Reason and Call Stack.

When debugging code that uses DOM event listeners or JavaScript timers, if Web Inspector was opened before the DOM event listener was added or the JavaScript timer was enqueued, the location of where that happened will also be included in the Call Stack section.

Keep in mind that these call frames are not active, meaning that you won’t have access to any local values for those frames. They are there purely to help you understand how you got to that point. In these cases, the current evaluation context is indicated by a .

If the Show Scope Chain on pause setting is enabled in the Sources pane in the Settings Tab, whenever JavaScript execution is paused, the Scope Chain panel in the details sidebar will be automatically shown, which contains information about all variables that exist in each scope that is visible from the current JavaScript execution point.

If there are any JavaScript breakpoints with a Probe Expression action, the Probes panel in the details sidebar is enabled.

Written January 14, 2020 by Devin Rousso

Last updated January 27, 2020 by Devin Rousso