Diagnose and fix layout problems

Use the DOM Explorer tool to see the state of your webpage's DOM (Document Object Model), examine HTML structure and CSS styles, and test changes to solve display issues.

Enter the DOM

HTML and CSS files are the blueprints a browser uses to build the DOM (Document Object Model), which it then uses to render a webpage. The DOM Explorer tool shows you a webpage's integrated structure and allows you to change styles, move HTML elements, and change element attributes without having to edit the page's source files.

This helps you diagnose problems when elements aren't in the right place or don't behave as expected, and then work to solve them.

The elements pane
Selecting an element
Editing an element
Moving an element
The styles pane
Styles
Trace (removed in Windows 8.1 Update)
Computed
Layout
Events
Changes (added in Windows 8.1 Update)

New DOM explorer in F12 developer tools

The elements pane

The elements pane on the left shows the DOM as it's currently constructed. Navigate through it with your mouse, clicking on the arrows next to parent elements to expand them and see their child elements. You can also navigate through it using the arrow keys on your keyboard, using the right and left arrow keys to expand and collapse elements.

Selecting an element

There are four ways to select an element to inspect:

  • From the elements pane: Use the keyboard or mouse to navigate through the elements pane.

  • Select element: Click the button next to the DOM Explorer title, or press CTRL + B to activate the Select element tool. Then click anywhere in the webpage and the element you click is selected.

  • Inspect element: Right-click any element in the webpage and select Inspect element from the context menu.

  • Breadcrumbs: After an element has been selected, the bottom of the elements pane shows a breadcrumb trail up through its parent elements (if any). Clicking a breadcrumb tile selects the element it represents.

When an element has been inspected, it's highlighted.

F12 Developer tools demo of element highlighting in DOM Explorer tool

The highlight displays not only the element boundaries, but the boundaries of its padding, borders, and margin. It can be toggled on or off using the second button to the right of the DOM Explorer tool's title.

Editing an element

There are three ways to edit an element:

  • Edit attributes: You can edit an attribute by double-clicking it, or selecting the element, pressing Enter, and then tabbing through the attributes.

    When you edit a class attribute, a list of matching classes from your styles are suggested. Double-click a suggestion or navigate to it with your arrow keys and press Tab or Enter to select it.

  • Add an attribute: Right-click the element and click Add attribute.

  • Edit as HTML: Right-click the element and click Edit as HTML. The element and its child elements appear as plain text inside a bounding box. Edit the text just as you might in a text editor and then click anywhere outside the box to commit your changes.

Important  The doctype, html, head, body, and script elements can't be edited as HTML in the DOM Explorer.

If your changes don't produce the desired result, press CTRL + Z to undo the last change. CTRL + Y will redo the change, reversing the effect of CTRL + Z.

Moving an element

Elements can be moved in two ways:

  • Drag DOM nodes: In Internet Explorer 11 you can drag elements in the elements pane. Click and drag an element to it's new location, just like you would any other type of movable item.

  • Cut/copy, and paste: Use right-click context menus or keyboard shortcuts to cut, copy, and paste elements.

    When you copy an element and then paste with CTRL + V, the element on the clipboard is pasted in as a child of the selected element. Right-click the element to use the Paste before option from the context menu.

    Note  Don't use the Copy element with styles option in the context menu to move an element within the DOM. It places an HTML document containing the element and all its related styles on the clipboard for pasting to an external editor.

The styles pane

The styles pane provides different views for looking at what styles are being applied to the element and what code is being triggered by events associated with it.

New in Windows 8.1 Update is the pseudo class toggle. In the upper-right corner of the Styles and Computed tabs is an icon resembling a:. When turned on, check boxes are shown for the common Hover and Visited pseudo classes. Checking one of those boxes restyles the element as if that pseudo class is active.

For example, if you want to experiment with CSS for a hover effect, turning on pseudo classes and checking Hover makes the element display as if a mouse is hovering over it until the box is cleared or the page is reloaded. This saves you time when fine-tuning a hover effect in DOM Explorer.

The styles pane has five tabs.

Styles

The Styles tab is a list of all the styles being applied to the element and which attributes of them are being applied. It separates styles directly targeting the element from inherited styles, and identifies which ancestors inherited styles come from. It also breaks out which styles are being applied due to CSS media queries.

It updates in real time, so if you have media queries based on window width, resizing the window alters the list of applied styles as different media queries are matched.

Editing styles

You can turn style properties on or off by checking or unchecking the box to the left of the property.

To edit a rule name or property, click it. IntelliSense autocompletion suggestions are new in IE11. When typing a property name, matching CSS property names are suggested. When typing a property value, if that property has a defined set of possible values, matching values are suggested. Double-click a suggestion or navigate to it with your arrow keys and press Tab or Enter to select it.

To add a new rule or add a property to an existing rule, right-click in the tab and click Add rule or Add property.

Trace

The Trace tab's information was combined into the Computed tab with the Windows 8.1 Update in Spring 2014.

The Trace tab traces the source of an element's styling.

F12 developer tools dom explorer style trace example

This image shows an element's color and the chain of color attributes from parent elements that are being overridden. If a particular property on an element isn't as expected, you can use trace to discover where the property is coming from and what it's overriding.

In the Trace tab, properties cannot be edited, but can be toggled on or off using the check boxes beside them. Turning off the currently active property activates the next property in the chain.

Computed

The Computed styles tab is much like the Trace tab except for two distinct differences:

  • Precise calculations: All properties without hardcoded measures, such as calc() expressions, percentages, or em units, are shown with the pixel values calculated for them.

  • Implied and default values: The Computed styles tab has a Display all styles button Display all styles button.

    When turned on, it shows only user-defined styles. When turned off, it shows Internet Explorer's default styles and any implied styles that are being applied to the element. The list can be very long, so a Filter properties box is next to it. Type text in the box and the properties list will be filtered down to only those that match the text.

Layout

The Layout tab shows a box model diagram for the selected element's positioning with colors matching the highlight around a selected element. You can edit any value in the diagram by clicking it.

Events

The Events tab shows the element's DOM events or CSS selectors that have handlers assigned to them in JavaScript. The file names can be clicked to show the file in the Debugger

Events panel in F12 Developer Tools DOM inspector

In the image above, one element's click event is being handled by two functions in two scripts. If you were getting unexpected behavior from clicking that element, it could be because one of the handlers should be listening for events on another element.

Changes

As you experiment with different layout and style changes in the DOM Explorer, it's easy to lose track of everything you changed. New in Windows 8.1 Update, the Changes tab shows a list of all the changes you've made to the DOM structure and CSS styles in your current session with the DOM Explorer. Original and current values are shown with different highlight colors.

If you decide you don't like one of the changes, right-click it and select Revert item to reverse that change. If you'd like to copy the style to paste into your source files, use Copy to copy a single style or Copy All to copy all the changed styles in the list.

Note  The Changes tab will clear if you close the F12 developer tools, but the changes you made with DOM Explorer persist until you refresh the webpage. For example, you can change the width of an element, close the F12 tools, reopen them, and the element remains at its new width while the Changes tab shows no changes.

Related topics

The Document Object Model (DOM)
Cascading Style Sheets

 

 

Show:
© 2014 Microsoft