Elements panel overview

Use the Elements panel to inspect and edit DOM elements.

Overview

The Elements panel provides a robust interface to inspect and manipulate the DOM. You can use the DOM tree, which resembles an HTML document, to select specific DOM nodes and modify them with other tools.

The Elements panel also has the following tabs that contain relevant tools:

• Styles:

  • View and debug CSS rules applied to an element from all style sheets.
  • Find any invalid, overridden, inactive, or other CSS that don't work as intended.
  • Edit elements by adding a declaration, applying a class, and by interacting with the Box model.
  • Access container editing options with Badges found in the DOM tree.

• Computed: Lists resolved properties applied to an element as they are rendered by Chrome.

• Layout: Contains options to modify grid and flexbox overlays.

• Event listeners: Lists all event listeners and their attributes. Lets you find the source of event listeners and filter for passive or blocking listeners.

• DOM breakpoints: Lists DOM change breakpoints added from the Elements panel and lets you enable, disable, remove, or reveal them.

• Properties: Select a DOM node to inspect and sort the object's own and inherited properties.

• Accessibility: Lists elements that have ARIA labels and their properties. Lets you toggle and inspect an accessibility tree (experimental).

Open the Elements panel

By default, when you open DevTools the Elements panel opens. You can also inspect a node anywhere on the page to automatically open the Elements panel.

To manually open the Elements panel:

1. Open DevTools.
2. Open the Command menu by pressing:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P Command Menu with
3. Start typing Elements, select Show Elements, and press Enter. DevTools displays the Elements panel in the Drawer at the bottom of your DevTools window.