Web Inspector ReferenceWeb Inspector Interface

Web Inspector is divided into six main areas.

Tab Bar

The Tab Bar has a list of tabs, each with a specific utility.

Tabs can be reordered by dragging, and can also be added/removed by right-clicking on the Tab Bar and checking/unchecking the item for the desired tab.

The Tab Bar also contains:

  • docking configuration buttons:
    • docks Web Inspector to the side of the inspected page. Only shown when Web Inspector is docked to the bottom of the inspected page or detached into its own window.
    • docks Web Inspector to the bottom of the inspected page. Only shown when Web Inspector is docked to the side of the inspected page or detached into its own window.
    • detaches Web Inspector into its own window. Only shown when Web Inspector is docked to the bottom or to the side of the inspected page.
    • closes Web Inspector. Only shown when Web Inspector is docked to the bottom or to the side of the inspected page.
  • controls for other functionality in the inspected page:
  • Console indicators:
    • is shown if there are any warnings in the Console Tab. Clicking it will jump to the Console Tab and automatically set the message filters to only show warnings.
    • is shown if there are any errors in the Console Tab. Clicking it will jump to the Console Tab and automatically set the message filters to only show errors.
  • pinned tabs:
    • allows for searching through all resources known to Web Inspector, respecting the global search settings. Can also be accessed by pressing   F.
    • shows all of Web Inspector’s settings. Can also be accessed by pressing  ,.

If Web Inspector is too narrow, tabs are condensed into a which, when clicked, shows the list of enabled tabs that are not visible.

Navigation Sidebar

The Navigation Sidebar contains a list of items related to the selected tab. Selecting one of those items will update the Main Content Area and any related panels in the Details Sidebar

There is a filter bar at the bottom of every Navigation Sidebar that respects the global search settings to filter the list of items to make finding the right item easier.

Some tabs don’t have a Navigation Sidebar, in which case the Main Content Area is responsible for selecting and showing information about any of the tab’s known items. For tabs that do have a Navigation Sidebar, it can be expanded/collapsed by clicking on / or pressing   0.

Main Content Area

The Main Content Area shows a representation of the selected item in the Navigation Sidebar.

If the selected tab does not have a Navigation Sidebar, the Main Content Area will show the items related to the selected tab instead.

The top of the Main Content Area can contain:

  • / expands/collapses the Navigation Sidebar.
  •   history controls.
  • Selection breadcrumbs that show the path of the selected item in the Navigation Sidebar. Clicking any item will show a context menu with items for each sibling of that item, allowing for quick hierarchical selection switching, or alternate representations of the currently shown content, such as switching between a resource’s request and response.
  • One or more content-specific controls, each with unique functionality, such as:
    • creates a local override.
    • / toggles pretty printing for any text content.
    • / toggles JavaScript type profiling.
    • / toggles JavaScript code coverage.
    • / toggles the image transparency grid.
    • imports previously exported content.
    • exports the currently selected/shown content. Can also be done by pressing  S.
    • refreshes the visualization for selected/shown content.
    • clears the current content or deletes its backing data. Can also be done by pressing  K.
  • / expands/collapses the Details Sidebar.

Details Sidebar

The Details Sidebar contains one or more panels which can be conditionally shown based on the selected item in the Navigation Sidebar or Main Content Area, each providing various types of additional information.

Some tabs don’t have a Details Sidebar, showing all information in the Main Content Area instead. For tabs that do have a Details Sidebar, it can be expanded/collapsed by clicking on / or pressing   0.

Split Console

The Split Console is a collapsable scrolling list of all logging activity, which shares content and state with the Console Tab.

Some tabs don’t allow the Split Console to be expanded as it wouldn’t fit with the layout of the rest of the tab. For tabs that do allow the Split Console, it can be expanded/collapsed by pressing esc or collapsed by clicking on .

It is also possible to open the Console Tab from the Split Console by clicking on .

Console Prompt

The Console Prompt is an input field that allows you to evaluate arbitrary JavaScript in any execution context of the inspected page. These evaluations and their results will appear in both the Split Console and the Console Tab.

Execution contexts include <iframe>, Worker, and even isolated worlds created by browser extensions or other APIs. If there is more than one execution context in the inspected page, an execution context picker is shown at the right of the Console Prompt.

The Console Prompt can be focused by pressing esc or  `.

Written June 8, 2020 by Brian Burg, Devin Rousso, Joseph Pecoraro, and Timothy Hatcher

Last updated June 8, 2020 by Devin Rousso