The DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through DOM updates.
- The DOM defines your page structure. Each DOM node is a page element, for example, a header node, paragraph node.
- Live-edit the content and structure of your pages through the rendered DOM.
- But remember, you can't modify source files through DOM changes in the Elements panel. Reloading the page erases any DOM tree modifications.
- Watch for changes to the DOM using DOM breakpoints.
Inspect an element
Use the Elements panel to inspect all elements in your page in one DOM tree. Select any element and inspect the styles applied to it.
There are several ways to inspect an element:
Right-click any element on the page and select Inspect.
Press Ctrl + Shift + C (Windows) or Cmd + Shift + C (Mac) to open DevTools in Inspect Element mode, then hover over an element. DevTools automatically highlights the element that you are hovering over in the Elements panel. Click on the element to exit inspect mode while keeping the element highlighted within the Elements panel.
Click the Inspect Element button to go into Inspect Element Mode, then click on an element.
inspect method in the console, such as
View the rendered and natural sizes of an image
Hover over an
img tag in the DOM Tree to view the rendered and natural sizes of that
View which image in a source set (srcset) is being used
To view which version of an image in a
srcset was loaded, select the
$0.currentSrc in the Console.
You can also view
currentSrc via the Properties tab. The Properties tab only displays
properties for the currently-selected element, so make sure that you've selected the
correct element before viewing.
Navigate the DOM
Navigate through the DOM structure using your mouse or keyboard.
A collapsed node has an arrow next to it pointing right:
An expanded node has an arrow next to it pointing down:
Using your mouse:
- Click once to highlight a node.
- To expand a node, double-click anywhere on it or click on the arrow next
- To collapse a node, click on the arrow next to it.
Using your keyboard:
- Press the Up Arrow key to select the node above the current one.
- Press the Down Arrow to select the node below the current one.
- Press the Right Arrow key to expand a collapsed node. Press it again to move to the first child of the (now-expanded) node. You can use this technique to quickly navigate deeply-nested nodes.
Navigate the breadcrumb trail
At the bottom of the Elements panel is a breadcrumb trail.
The currently selected node is highlighted in blue. The node to the left is the current node's parent. And to the left of that is the parent's parent. And so on, all the way up the tree.
Navigating back up the structure moves the highlight:
DevTools displays as many items as possible in the trail. If the entire trail doesn't fit in the status bar, an ellipsis (...) shows where the trail has been truncated. Click the ellipsis to show the hidden elements:
Edit DOM nodes and attributes
To edit a DOM node name or attribute:
- Double-click directly on the node name or attribute.
- Highlight the node, press Enter, and then press Tab until the name or attribute is selected.
- Open the more actions menu and select Add Attribute or Edit Attribute. Edit Attribute is context-sensitive; the portion you click on determines what gets edited.
The closing tag is automatically updated when you're finished.
Edit DOM node and its children as HTML
To edit a DOM node and its children as HTML:
- Open the more actions menu and select Edit as HTML.
- Press F2 (Windows / Linux) or Fn+F2 (Mac).
- Press Ctrl+Enter (Windows / Linux) or Cmd+Enter (Mac) to save your changes.
- Press Esc to exit the editor without saving.
Move DOM node
Click, hold, and drag a node to move it.
Delete DOM node
To delete a DOM node:
- Open the more actions menu and select Delete Node.
- Select the node and press the Delete key.
Show more actions menu
The more actions menu lets you interact with a DOM node in a variety of ways. To view the menu, right-click on a node, or select a node and then press the more actions button ()). The button is only displayed on the currently selected element.
Scroll into view
When you hover over or select a DOM node, the rendered node is highlighted in the viewport. If the node is scrolled offscreen, you'll see a tooltip at the top of the viewport if the node is above the current viewport, and a tooltip at the bottom if the node is below the current viewport. For example, in the screenshot below DevTools is indicating that the currently selected element in the Elements panel is below the viewport.
To scroll the page so the node appears in the viewport, Right-click the node and select Scroll into View.
Set DOM breakpoints
A subtree modification breakpoint is triggered when a child element is added, removed, or moved. For example, if you set a subtree modification breakpoint on the
main-content element, the following code triggers the breakpoint:
var element = document.getElementById('main-content'); //modify the element's subtree. var mySpan = document.createElement('span'); element.appendChild( mySpan );
An attribute modification occurs when the attribute of an element (
class, id, name) is changed dynamically:
var element = document.getElementById('main-content'); // class attribute of element has been modified. element.className = 'active';
A node removal modification is triggered when the node in question is removed from the DOM:
Interact with DOM breakpoints
The Elements and Sources panels both include a pane for managing your DOM breakpoints.
Each breakpoint is listed with an element identifier and the breakpoint type.
Interact with each listed breakpoint in any of the following ways:
- Hover over the element identifier to show the element's corresponding position on the page (similar to hovering over nodes in the Elements panel).
- Click an element to select it in the Elements panel.
- Toggle the checkbox to enable or disable the breakpoint.
When you trigger a DOM breakpoint, the breakpoint is highlighted in the DOM Breakpoints pane. The Call Stack pane displays the reason for a debugger pause:
View element event listeners
The top-level items in the Event Listeners pane show the event types that have registered listeners.
Click the arrow next to the event type (for example
click) to see
a list of registered event handlers. Each handler is identified by a CSS
selector-like element identifier, such as
button#call-to-action. If more than one handler is registered for the
same element, the element is listed repeatedly.
Click the expander arrow next to an element identifier to see the properties of the event handler. The Event Listeners pane lists the following properties for each listener:
|Event Listener Properties & Description|
||Contains a callback function. Right-click on the function and select Show Function Definition to view where the function is defined (if source code is available).|
||A boolean value stating whether the useCapture flag on
View ancestor event listeners
When the Ancestors checkbox is enabled, the event listeners for the ancestors of the currently selected node are displayed, in addition to the currently selected node's event listeners.
When the checkbox is disabled, only the event listeners for the currently selected node are displayed.
View framework listeners
When the Framework listeners checkbox is enabled, DevTools automatically resolves the framework or library wrapping portion of the event code, and then tells you where you actually bound the event in your own code.
When the Framework listeners checkbox is disabled, the event listener code will probably resolve somewhere in the framework or library code.
Show HTML comments
To show or hide HTML comments in the Elements panel:
- Open Settings.
- Click the Preferences tab.
- Under the Elements section, check the Show HTML comments checkbox.
To show or hide HTML comments in the Elements panel, open Settings, go to the Preferences panel, find the Elements section, and then toggle the Show HTML comments checkbox.
Was this page helpful?