The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.
The Elements panel is sometimes a better way to "view source" for a page. Inside the Elements panel, the page's DOM will be nicely formatted, easily showing you HTML elements, their ancestry and their descendants. Too often, pages you visit will have minified or simply ugly HTML which makes it hard to see how the page is structured. The Elements panel is your solution for viewing the real underlying structure of the page.
Follow the steps below to explore the Elements panel:
- Open the Google Closure Hovercard demo page.
- Open the Developer Tools window as described in the How to Access the Developer Tools section.
- If it is not already selected, select Elements.
This shows the page's HTML elements in the main pane, and styles, metrics, properties, and event listeners in the right-hand sidebar. If Developer Tools opened via the Inspect Element action, it is automatically drilled down to and highlighted the element under mouse. This is very useful when you are curious which HTML generated a particular page element.
DOM Elements Tree
Elements tree, including its inline scripts and styles are syntax highlighted.
For example, select the
<script> tag. You should see something like the following:
<p> element in the main window, you should see
something like this:
<p>element currently has no attributes. Typing or pasting in attributes on the highlighted lines adds them to the DOM element. Deleting text deletes the attribute.
- You can edit node attributes in the main pane via double clicking them or pressing Enter key while on an element. Tab will iterate over the editable attributes.
- You can delete selected nodes using Del key.
- You can drag-and-drop an element to change its position within its parent, or even move the element to a different parent.
The cascading nature of CSS makes the Styles browser in the Elements tab very useful. Sometimes, styles collapse onto themselves and unintended visuals appear. Knowing which styling rule the browser is applying to the element helps you debug such an issue.
Click the magnifying glass icon to turn on inspect mode. Return to the Google Closure Hovercard page and click the top-left card, Tom Smith. Because you are in inspect mode, this highlights the corresponding node in the Elements panel and displays its associated styles, then turns off inspect mode.
You'll see that we're able to tell all the style attributes that are being applied.
For example, the padding comes directly from the
class == anchor attribute. The font is first defined for
but then overriden by the
.anchor. There is also the
specified that is not recognized by the rendering engine. Properties like this are marked
with the triangle warning sign to the left.
While it's great to see the individual styles and where they come from, it's also very useful to see the final set of styles after it is computed and applied to the element. You can see the final product by selecting the Computed Style section and explore styles as rendering engine perceives them.
Now, hover over the .anchor editable style rule in the sidebar to see checkboxes that let you disable individual properties. You should see something like this:
Click an editable (non-grayed-out) style property name or value to edit them. For example, double-click the margin: 20px property. You should see something like this:
You can add a new style selector using the button found in the Styles section bar. In order to emulate an element's pseudostate (:active, :hover, :focus, :visited), use the in the Styles pane header. In will bring up a small pane where you can select which pseudostates of the selected element should be activated.
Open the Metrics pane in the right-hand side-bar, then double-click one of the metrics values.
Select the Properties pane in the right-hand sidebar, then expand Element.
You will see a list of your DOM breakpoints (contains a single breakpoint you just added.) You can toggle the breakpoint using a nearby checkbox to de-activate (and re-activate) it, or you can remove it altogether using its context menu's "Remove Breakpoint" item.
Select Event Listeners in the right-hand sidebar.
Type document.write in the search box. You should see incremental search running: