The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like
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.
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
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.
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.
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.
- For more information, please read Local Overrides.
- For more information, please read Inspector Bootstrap Script.
- 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.
- 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.
The functionality described above can also be triggered by a variety of keyboard shortcuts from anywhere inside Web Inspector.
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 .