Web Inspector Reference Elements Tab

The Elements Tab is the primary source of information for anything related to the DOM of the inspected page.

DOM Tree

The Main Content Area shows a live visualization of the DOM of the inspected page, matching HTML behavior and semantics (e.g. collapsing whitespace).

Hovering over any DOM node will highlight it in the Page Overlay.

DOM nodes can be reordered by dragging, support double-clicking to edit any tag/attribute/text/etc., and (once editing) allow for tabbing to switch between editable content.

If a DOM node is not actually rendered in the inspected page, it will be displayed in greyscale. This can be disabled in the Elements pane of the Settings Tab.

Any DOM node with especially important states will have small badges after the opening tag:

grid badges indicate that the DOM node has a CSS grid layout. Clicking it will toggle the CSS grid overlay for that DOM node in Page Overlay.
flex badges indicate that the DOM node has a CSS flex layout. Clicking it will toggle the CSS flex overlay for that DOM node in Page Overlay.
Event badges indicate that the DOM node has at least one DOM event listener. Clicking it will show a popover listing all event listeners for that DOM node, just like in the Node panel.
Scroll badges indicate that the DOM node is scrollable.

Right-clicking on any DOM node in the DOM Tree (including those not in the Elements Tab) will show a context menu with a variety of useful actions, such as Log Element (saves the DOM node to a variable in the Console), adding/removing DOM Breakpoints, toggling CSS pseudo-classes, Add/Edit/Copy/Delete commands, and more.

The top-left of the Main Content Area shows a breadcrumb navigation from the main document element to the selected DOM node, allowing for quick selection of relative DOM nodes.

There are also some toggles in the top-right of the Main Content Area:

Badges allows for choosing which of the above badges are shown next to DOM nodes in the DOM Tree.
[Show Rulers] will enable page rulers and node border lines in the page overlay.
[Force print media styles] will make the inspected page think that it’s being printed, which will cause any @media print CSS to apply.
[Force Appearance] will make the inspected page switch to the opposite appearance currently used by the system (e.g. if the system is in light mode, this will cause the inspected page to think it’s in dark mode).
[Show compositing borders] will draw borders around and indicate the number repaints for each layer, just like in the Layers Tab.
[Enable paint flashing] will cause layers to briefly flash red when they are repainted, just like in the Layers Tab.

Details Sidebar

The Styles panel organizes the CSS applied to the selected DOM node in the DOM Tree by CSS selector specificity and DOM node inheritance.

By default, the Styles panel is split out into a separate column if Web Inspector is wide enough to allow more information to be visible at the same time. This is enabled by the Show independent Styles sidebar checkbox in the Elements pane of the Settings Tab.

Unless otherwise indicated, every part of each CSS ruleset is editable. Invalid declarations are indicated with a yellow highlight and have a tooltip briefly explaining why. Autocompletion is provided for CSS properties and relevant keyword/function values. Specialized editors for various CSS declaration values can be shown by clicking on the nearby image (e.g. color/gradient swatches, [Edit “cubic-bezier” function], [Edit “box-shadow”], etc.).

CSS selectors will gray out any part of the selector that doesn’t match the selected DOM node in the DOM Tree (or ancestor in the case of inherited CSS rulesets). Clicking on the icon next to the CSS selector will show a context menu with a variety of useful actions.
- Author Style Sheet CSS Ruleset
- Author Style Sheet CSS Ruleset for a CSS Pseudo-Element
- User Style Sheet CSS Ruleset
- User Style Sheet CSS Ruleset for a CSS Pseudo-Element
- User Agent Style Sheet CSS Ruleset
- User Agent Style Sheet CSS Ruleset for a CSS Pseudo-Element
- Inspector Style Sheet CSS Ruleset
- Inspector Style Sheet CSS Ruleset for a CSS Pseudo-Element
- Inherited CSS Ruleset
- DOM style Attribute CSS Declaration Block
- Inherited DOM style Attribute CSS Declaration Block
New CSS rulesets can be created by clicking the [Add new rule] in the bottom left. By default they will be added to the Inspector Style Sheet (which will be created if it does not already exist), but can instead be added to any existing style sheet by right-clicking. These CSS rulesets (and the Inspector Style Sheet) are not preserved across navigations or between Web Inspector sessions.

The Classes button in the bottom right controls a shelf that lists all CSS classes of the selected DOM node in the DOM Tree, providing checkboxes to quickly toggle each and an input to add new CSS classes.
The Computed panel visualizes the CSS box model and lists the computed value for every CSS property for the selected DOM node in the DOM Tree.

By default the Properties section will only show CSS properties that have been modified by a CSS ruleset that applies to the selected DOM node in the DOM Tree. This can be changed by clicking on the [Filter] to Show All unmodified/inherited CSS properties and/or to Prefer Shorthands (when possible).

CSS variables are split out into a separate Variables section to avoid cluttering the Properties section.
The Layout panel provides special tools for specific CSS layout modes, such as the CSS grid overlay.
The Font panel shows information about the active font for the selected DOM node in the DOM Tree, providing computed values for both basic properties (e.g. size, style, weight, etc.) and advanced properties (e.g. ligatures, alternate glyphs, variations, etc.).
The Changes panel lists modified CSS declarations for either the selected DOM node in the DOM Tree or for all styles in the inspected page based on the Show only for selected node setting checkbox in the Elements pane of the Settings Tab.
The Node panel contains more verbose representations of the attributes, accessibility data, JavaScript event listeners (including ancestors), and JavaScript object inheritance for the selected DOM node in the DOM Tree.
The Layers panel is similar to the All Layers panel in the Layers Tab in that it shows basic information about each layer, but instead limits its scope to the selected DOM node and its descendants in the DOM Tree.