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:
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:
- Open DevTools
.
- Open the
Command menu
by pressing:
- macOS:
Command
+
Shift
+
P
- Windows, Linux, ChromeOS:
Control
+
Shift
+
P
- Start typing
Elements
, select
Show Elements
, and press
Enter
. DevTools displays the
Elements
panel in the
Drawer
at the bottom of your DevTools window.