Debugging HTML and CSS with the Developer Tools

This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.

Windows Internet Explorer 8 provides enhanced Developer Tools to help you research and resolve HTML, Cascading Style Sheets (CSS), and JavaScript related problems. This article is focused on the HTML and CSS tools of the Developer Tools. For information about debugging HTML and CSS code using F12 tools in Windows Internet Explorer 9 see Using F12 Developer Tools to Debug HTML and CSS.

• Introduction
• Opening and Closing the Developer Tools
• Selecting Objects on a webpage
• Inspecting HTML Elements
  • Using the Style and Trace Style Tools
  • Using the Layout Tool
  • Using The Attributes Tool
• Inspecting CSS Rules
• Saving Changes
• Summary
• Related topics

Introduction

The Developer Tools feature of Internet Explorer 8 enables you to review the browser's internal representation of a webpage. You can use the Developer Tools for a variety of tasks, including (but not limited to) viewing individual attributes, determining why a particular CSS rule is applied to an individual element, and previewing different document compatibility modes. By exposing how the browser interprets a webpage, the Developer Tools provide many opportunities to research and resolve problems, and do it faster than has been possible with the previous versions of Windows Internet Explorer.

This article focuses on the HTML and CSS Developer Tools. For information on how to use the Developer Tools to debug in JavaScript, see Debugging Script with the Developer Tools.

Opening and Closing the Developer Tools

To open the Developer Tools, press F12; alternatively, on the Tools menu of the Internet Explorer 8 toolbar, click Developer Tools. The following image shows the Developer Tools window.

Figure 1.Developer Tools command and the Close button.

Once started, the Developer Tools can be in their own window or pinned to the browser's instance that opened it. Each Internet Explorer tab has its own instance of the Developer Tools. When working with multiple instances of the Developer Tools, use the Pin feature - whose button appears in the upper-right corner of the Developer Tools window - to attach each Developer Tools to its window. When pinned, the Developer Tools window can be resized to display a larger viewable area.

You can close the Developer Tools in one of several ways: by pressing F12, clicking the Developer Tools button on the Tools menu, clicking the Close button in the upper-right corner of the Developer Tools window, or closing the Internet Explorer window or the Tab that opened it.

Selecting Objects on a webpage

Many HTML and CSS developer tools operate on individual elements in a webpage. To select an element, either highlight it in the HTML tab or click the Select Element by Click button on the Developer Tools Find menu. If you click this button, you will be able to use the mouse to select an element on your webpage. Move the cursor over an element; when a blue box highlights the element's border, click to select the element. The following figure shows the results of selecting an element.

Figure 3. The Select Element by Click button and the results of selecting an element.

When you highlight and click an HTML element, the HTML tab shows the selected element's attributes, along with its location in the internal representation used by Internet Explorer 8 to display the webpage. You can view the element's current attribute values and experiment with new values by using the HTML tab to change them. To change an attribute value, click it, enter a new value, and then press ENTER; Internet Explorer 8 will display the effects of your change. You can discard partial values by pressing ESC. To restore the webpage to its original appearance, Refresh the page.

Note  Changes made using the HTML tab do not affect the underlying source of a webpage; they remain in effect until a webpage refreshes, or until the browser navigates to a new webpage or is closed. See the section under Saving Changes below about saving your changes.

Inspecting HTML Elements

The HTML tab helps you inspect the presentation of HTML elements on a webpage. The HTML tab offer two viewing panes. The pane on the left is the Primary Content Pane and the pane on the right is the Properties Pane.

• The Primary Content Pane is where the entire Document Object Model (DOM) is presented in a tree-node structure that can be expanded or collapsed. Use this pane to investigate and inspect your HTML sources. Attributes and values of HTML elements are editable by clicking on them. Text nodes are also editable in this mode. However, if you want to edit the entire webpage in an editor format you can click the Edit button. While in edit mode, the Word Wrap button is activated. You will also noticed that the content of this page may not be exactly the same as the original source because this is the internal representation of Windows Internet Explorer for this webpage. If you have JavaScript calls to write contents to the page, you will see them in this edit mode. Once you are done editing, click the Edit button again and the changes will take affect immediately.
• The Properties Pane offers a Property Type Chooser menu bar at the top. The Property Type Chooser offers several tools to help you inspect your sources closer. For example, while the Primary Content Pane is in the DOM mode, you can click to select any HTML element to inspect. Once clicked, the element's properties will show up in the Properties Pane. How and what information is presented depends on the property type you currently have selected. For example, if the current type is Style, then what you will see is a list of CSS rules that were applied to this element. The other property types are Trace Styles, Layout, and Attributes.

Using the Style and Trace Style Tools

When the Style and Trace Style tools encounter multiple CSS rules that apply to the selected element, the rules are displayed based on their specificity according to the CSS specification. The rule at the top of the list is the first to get applied to the selected element, while the rule at the bottom is the one that currently defines the style properties of a selected element. The values of these rules are editable: click a value, type in a new value, and press ENTER; a change will appear on the webpage immediately. The information found in both property types are the same. However, in the Trace Style property type, the same information is grouped by properties with the rules displayed below them. The properties are listed in alphabetical order and the rules are again ordered based on specificity.

Using the Layout Tool

The Layout tool offers the box model information of an element's relative positioning on a webpage. Available information includes:

• Offset: These values describe the distance between the selected object and its parent, as represented by the offsetLeft and offsetTop properties.
• Margin, Border, and Padding: These three values display the values specified in the source of a webpage. If no values are specified, the tool will display the default values used by Internet Explorer.
• Width and Height: The innermost values are the element's width and height as defined by the offsetHeight and offsetWidth properties.

For each box model attribute, the value and unit of measurements are displayed. Click a value to edit it, then press ENTER to commit the new value, or ESC to cancel it. Once you press ENTER, the new value will take affect immediately. By default (if the unit of measurement is not displayed), the Layout tool handles box model values as pixels.

Using The Attributes Tool

The Attributes tool presents the attributes of an HTML element as a list of name/value pairs. You can inspect the information and an attribute's name and value by double-clicking on it. The attribute's name and value information can also be edited from the Primary Content Pane by clicking on it. An attribute's value may be empty or null, but an attribute's name cannot be empty. Changes to this information will reflect immediately on the webpage. The Attributes tool also offer the option to add additional attributes to the element or remove attributes from the element by clicking on the appropreate button at the top of the pane.

Inspecting CSS Rules

The CSS tab enables you to understand the interplay among your style sheets. It is most useful for sites that use multiple style sheets. To switch between style sheets, use the Style Sheet Chooser. When you select a style sheet, the rules and their associated style properties appear in the Primary Content Pane. This information is grouped by style rules. By default, this button shows the first style sheet referenced in your webpage. As shown in the following screen shot, the style sheets' rules appear beneath the Style Sheet Chooser button.

To expand or collapse the properties of a rule, click the box marked with a + or - sign. All elements in this style sheet view are editable, and the edits take effect immediately. A style rule can be turned on or off by clicking on the checkbox next to the style name. Alternatively, you my choose to just turn on or off a single property or a few properties to see the affect it has on the rule.

Saving Changes

Now that you have made changes to your HTML page and CSS files, click the Save button to save your changes. The Save As dialog box prompts you to save the file as .txt rather than .html or .css. This will prevent you from accidentally overriding your main source files. In addition, this is done because all changes made in the Developer Tools are Internet Explorer's internal representation of the webpage rather than what is in the original source. For this reason, refreshing the current webpage, navigating away from it, or performing Undo All will bring back the original webpage's content.

Note  As you work in the Developer Tools, remember that not only will the modified areas of a webpage differ from your sources, but other parts of it might differ as well, because the Developer Tools display your webpage as it exists in Internet Explorer rather than in your sources. To prevent accidentally overwriting the sources, the Developer Tools save the output as text and add a leading comment to the saved file.

Summary

The Internet Explorer 8 Developer Tools help you troubleshoot and resolve problems with your webpages. The HTML tools enable you to focus on specific attributes and properties of individual HTML elements on a webpage. The CSS tools provide a larger view, showing how various rules and properties in your style sheets are interpreted by Internet Explorer 8. Because the changes you make to the sources in the Developer Tools only affect Internet Explorer's internal representation of the website, and not the original source directly, a Save button is offered to allow you to save the changes and use them to update your sources. This will save you time and will improve the efficiency of maintaining webpages.

Related topics

Debugging Script with the Developer Tools

Profiling Script with the Developer Tools

Developer Tools User Interface Reference

Developer Tools Keyboard Shortcuts Reference

Defining Document Compatibility

Process Debug Manager

Windows Script Interfaces