Share via

Diagnose and fix layout problems

  • Article

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)

Color Picker (added in Cumulative Security Update for Internet Explorer (KB2976627))

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 five 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.

  • Search: The "Find" box at the top of the tool searches through the DOM by partial string or CSS selector. Click in the box or type CTRL + F to activate it, type your search string, and press the ENTER key. For searches with multiple results, ENTER will move you forward to the next result. The left and right arrow keys in the search box search backward and forward in the result set. The backward/forward search wraps continuously from beginning to end.

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

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.

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 .

    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.

Cumulative Security Update for Internet Explorer (KB2976627) brings another feature to the Computed tab: Change Bars. Also available in the Styles tab, change bars display different colors next to changed, added, and deleted properties.

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

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.

 

Color Picker

The Color Picker is new in Cumulative Security Update for Internet Explorer (KB2976627) and makes picking or capturing colors much easier in the DOM Explorer.

Opening the Color Picker

The Color Picker operates in two modes.

To open it in a standalone mode, click on the eyedropper icon in the top of the DOM Explorer or use the keyboard shortcut CTRL + K. In standalone mode, you can highlight color values with your mouse and copy them for use elsewhere in your code.

To open it in integrated mode, click on a color square next to a style's color value in the Styles pane. When you select a color in the picker, it will replace the original color.

Picking colors

There are three options for picking colors in the Color Picker. When you've picked the color you want, close the Color Picker the same way you opened it.

  • Eyedropper: When you select the eyedropper icon, the mouse pointer changes to an eyedropper. Place the tip of the eyedropper over any part of your desktop, inside or outside of the browser, and click to make the Color Picker pick up that color.
  • Color Wheel: Clicking the wheel icon will drop down a selection of sliders, giving you control over the Hue, Saturation, Lightness, and Alpha values. If you are in integrated mode and are adjusting an existing style, the color in the Styles pane and in your webpage will change value as you adjust the sliders. .
  • Color Swatch: The four boxes to the right of the Color Wheel, with arrows on either side, are a pallette of the colors already in your document. Use the arrows to navigate back and forth through the pallette. Clicking on a box will select that color.

F12 Updates in kb2976627

The Document Object Model (DOM)

Cascading Style Sheets