Elements panel overview

Dale St. Marthe
Dale St. Marthe

Use the Elements panel to inspect and edit DOM elements.


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:

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.