.gif)
Note: This documentation is preliminary and is subject to change.
Internet Explorer 8 provides enhanced Developer Tools to help you research and resolve problems involving HTML, Cascading Style Sheets (CSS), and JavaScript. This article introduces the HTML and CSS developer tools.
Introduction
The Internet Explorer 8 Developer Tools let you review your Web pages from Internet Explorer's point of view by exposing Internet Explorer's internal representation of your pages. 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, previewing different document compatibility modes, and so on. By exposing the way Internet Explorer interprets your Web page, the Developer Tools provide many opportunities to research and resolve problems more quickly than was possible with older versions of Internet Explorer 8.
This article introduces the HTML and CSS developer tools. For information on how to use the Developer Tools to debug JavaScript issues, see Developer Tools: Script Debugging Overview.
Opening and Closing the Developer Tools
To open the Developer Tools, press SHIFT+F12 or click the Developer Tools button on the Internet Explorer toolbar, shown in Figure 1.
.gif)
Figure 1. The locations of the Developer Tools button and the Close button.
The Developer Tools window appears in front of the Internet Explorer window. To close the Developer Tools, press SHIFT+F12, click the Developer Tools button in the Internet Explorer toolbar, or click the Close button on the Developer Tools window. The Close button appears in the upper-right corner of the Developer Tools window.
Understanding the Document Compatibility Tools
As discussed in Defining Document Compatibility, Internet Explorer 8 introduces the concept of document compatibility, which controls the way Internet Explorer interprets and displays your Web pages. The Developer Tools allow you to dynamically choose the compatibility mode used to display a Web page. This allows you to see visual differences between different compatibility modes and enables you to discover the most appropriate compatibility mode for your Web page.
To change the document compatibility mode for a given Web page, use the Change Compatibility Mode command from the View menu on the Developer Tools menu. A check mark indicates the selected compatibility mode.
Note Like other developer tool changes, the Change Compatibility Mode command is temporary and does not affect the underlying source of your Web page. Furthermore, it remains in effect until the page is refreshed, the browser navigates to a new page, or the browser window is closed.
Outlining Objects with the Developer Tools
The Outline menu of the Developer Tools menu highlights sets of objects on a Web page; this helps you understand where elements appear in a Web page as well as the types of elements used to create specific effects. When you choose commands from the Outline menu, Internet Explorer outlines corresponding elements on the Web page. For example, when you choose the div elements command from the Outline menu, outlines appear around all div elements in the current Web page, as shown in the following figure.
.gif)
Figure 2. The commands on the Outline menu show where objects appear on a Web page.
To clear a set of outlines, select the corresponding command from the Outline menu. You can also select the Clear Outlines command from the Outline menu, which clears all outlines.
Selecting Objects with the Developer Tools
Many of the HTML and CSS developer tools operate on inidivudal elements in your Web pages. To select an element, either highlight it in the HTML tool or use the Select Element by Click button on the Developer Tools toolbar. When you click the toolbar button, you can use the mouse to select an element on your Web page. Blue boxes highlight elements as you point to them with the mouse, as shown in Figure 3.
.gif)
Figure 3. Use the Select Element by Click button to select an individual element.
When you've highlighted the element you want to select, click it. When you do this, the HTML tool shows the attributes of the selected HTML element, along with its location in the internal representation Internet Explorer uses to display your Web page.
Once you've selected an element in your Web page, you can view its current attribute values and experiment with new values by using the HTML tool to change them. To change an attribute value, double-click the value you want to change, enter the new value, and then press ENTER. When you do this, Internet Explorer displays the effects of your change.
You can discard partial values by pressing the ESC key before pressing ENTER. To restore the page to its original appearance, refresh it.
Note Changes made using the HTML tool do not affect the underlying source of your Web pages; they remain in effect until the page refreshes, the browser navigates to a new page, or the browser is closed.
Understanding the HTML Tools
The HTML tools also include tools designed to help you understand the presentation of the HTML elements in your Web page. They appear to the right of the HTML tool and include the following tools.
The Style tool shows how your CSS rules have been applied to the selected element. It shows the attributes that have been affected and where those values were specified. The checkmarks to the left of each rule can enable or disable the rule; you can use the checkmarks to experiment with the appearance of the elements on your Web page.
The Layout tool displays the attributes of the element's box model, which in turn shows how the element flows in relation to the objects around it. For more information regarding the box model, see the W3C's box model discussion .gif)
.
The Trace Styles tool displays the CSS attributes that have been applied to an element, the element where the attribute was defined, and (if applicable) the name of the style sheet defining the attribute value.
Understanding the Style and Trace Style Tools
If the Style and Trace Style tools encounter multiple CSS rules that apply to the selected element, the rules are displayed in the order they were encountered by Internet Explorer. The rule at the top of the list is the first one that applied to the selected element while the last rule in the list is the one currently used to define the style attributes for the selected element.
Understanding the Layout Tool
The Layout tool displays the following values.
The Offset values describe the distance between the selected object and its parent, as represented by the offsetLeft and offsetTop properties.
The margin, border, and padding values display corresponding values specified in the Web page. If no values are specified in the source of the Web page, the Layout tool displays the default values used by Internet Explorer.
The innermost values are the element's height and width as defined by the properties offsetHeight and offsetWidth properties.
The value and units of measurement of each box model attribute are displayed. By default, the Layout tool assumes box model attributes are specified in pixels; if a unit of measurement is not displayed in the Layout tool, the value represents pixels.
Understanding the CSS Tool
The CSS tool enables you to understand the interplay between your style sheets and is most useful for sites that use multiple style sheets. The first row of the CSS tool is a button that lets you display the various rules defined by the style sheets loaded by your Web page. By default, this button shows the first style sheet referenced in your Web page. The rules in the style sheet appear below the style sheet button, as shown in Figure 4.
.gif)
Figure 4. The CSS Tool displays the rules defined in all style sheets used by a Web page.
You can expand or collapse the attributes of a rule by double-clicking the name of the rule.
Click the style sheet file name to display a menu showing a list of all style sheets loaded by your Web page. To display the rules defined in a different style sheet, select the desired style sheet from the menu. When you do this, the rules and their associated style attributes appear in the CSS tool.
The CSS tool is read-only. Unlike the HTML tool, you cannot use the CSS tool to change the attributes defined in your style sheets.
Summary
The Internet Explorer 8 Developer Tools help you troubleshoot and resolve problems with your Web pages. The HTML tool lets you focus on the specific elements and attributes of individual HTML elements in your Web page. The CSS tool provides a larger view; it shows how the various rules and attributes in your style sheets are interpreted by Internet Explorer.