Editing styles & DOM

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:

Select the <p> element in the main window, you should see something like this:

This lets you add, edit, or delete attributes for the selected DOM element - the <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.

CSS Styles

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 <span> element's class == anchor attribute. The font is first defined for body, but then overriden by the .anchor. There is also the font property 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:

You can disable a property by de-selecting it.

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:

Autocompletion suggestions will appear while editing property names and values. To add a new style property, click anywhere in the editable style declaration whitespace. The new property will be added immediately after the clicked style declaration. If you edit a style property value with a number, you can use the Up or Down keys to change the number. Holding the Alt/Option key steps by 0.1, holding the Shift key steps by 10. You can add more properties via double-clicking white area to the left / bottom of existing entries or via pasting multiple properties separated with semicolon. You can start editing of style rule selectors by clicking them. You can also add new style rules using the Gear Menu, located to the right of the Styles section bar.


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.

Box Model

Open the Metrics pane in the right-hand side-bar, then double-click one of the metrics values.

This lets you edit any of the absolute, relative, or fixed CSS box model metrics.

Properties

Select the Properties pane in the right-hand sidebar, then expand Element.

From here you can edit the element's DOM properties. Deleting all the text deletes the property, if allowed.

DOM Breakpoints

You can add breakpoints that fire on DOM modifications related to a certain element. Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal. Let's select "Attributes Modification" for now. Mover your mouse over any gray rectangle with a name. Your JavaScript code will break inside tooltip.js which tries to modify the "className" attribute of the #profileCard element. Press F8 to continue the JavaScript execution. The code immediately breaks on an attribute modification once again. Now select DOM Breakpoints in the right-hand sidebar.


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.

Event Listeners

Select Event Listeners in the right-hand sidebar.

The event listeners shown for the selected node are in the order in which they are fired through the capturing and bubbling phases. This provides the most accurate and useful information possible. Event listeners are separated by type. If a node has both onclick and onmouseover listeners they appear in different sections. You can also set your filter preference using the Gear Menu. You can choose to see only the listeners registered on the selected node, or the entire event flow.

Search

Type document.write in the search box. You should see incremental search running:

The Elements panel supports XPath and CSS selectors as queries, in addition to plain text. All search results are highlighted in the DOM tree, the first match is revealed and selected.