.gif)
Note: This documentation is preliminary and is subject to change.
Internet Explorer 8 provides enhanced Developer Tools to help you research and resolve HTML-, Cascading Style Sheets (CSS)-, and JavaScript-related problems. This article introduces the HTML and CSS developer tools.
Introduction
The Developer Tools feature of Internet Explorer 8 enables you to review the internal representation of a Web page from the browser's perspective. 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 how the browser interprets a Web page, the Developer Tools provide many opportunities to research and resolve problems, and do it faster than has been possible with the previous versions of Internet Explorer.
This article introduces the HTML and CSS Developer Tools. For information on how to use the Developer Tools to debug in JavaScript, see Developer Tools: Script Debugging Overview.
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.
.gif)
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 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.
Testing Webpages in Different Modes
The Developer Tools enable you to test your Web pages in different modes, thus allowing quick resolution of compatibility problems before your users encounter them. When the Developer Tools are open for the first time, they detect a Web page's mode settings and treat them as the default modes of that page. You can then test the Web page using the Browser Mode and the Document Mode menus.
Testing The Browser Mode
With the Browser Mode menu, you can choose how the browser will report the following three properties:
| Property | Description |
|---|
| User Agent string | The value that Internet Explorer sends to Web servers to identify itself. |
| Version Vector | The value used in conditional commenting, which can also be used to affect CSS, markup and script blocks. For more information on conditional commenting and version vector, read this article: About Conditional Comments. |
| Document Mode | The value used to determine whether Internet Explorer uses the most recent behavior for CSS, DOM, and JavaScript operations, or emulates a previous version of Internet Explorer for compatibility. |
On the
Developer Tools menu bar, the
Browser Mode offers three options, each modifying the properties described in the preceding table in a different way. The following table describes these options.
| Browser Mode | Description |
|---|
| Internet Explorer 7 | In this mode, Internet Explorer 8 reports a user agent, version vector, and document mode as if in Internet Explorer 7. Use this mode to test how Internet Explorer 7 users experience your site. |
| Internet Explorer 8 | In this mode, Internet Explorer 8 reports a user agent, version vector, and document mode to match the default browser behavior, which is most standards-compliant in Internet Explorer 8. Use this mode to test how Internet Explorer 8 users experience your Web site. |
| Internet Explorer 8 Compatibility View | In this mode, Internet Explorer 8 reports version vector and document mode as if in Internet Explorer 7, but the user agent string includes a token indicating that it is truly Internet Explorer 8 along with the Internet Explorer 7 string. Use this mode to test how Internet Explorer 8 users experience your Web site if they choose the Compatibility View option in Internet Explorer. |
Note Once a user clicks on the
Compatibility View button
.gif)
, the browser saves your domain to a
Compatibility View list. Subsequent visits to the domain will be automatically rendered under the Internet Explorer 8 Compatibility View mode. A user can
Add or
Remove domains from their browser's
Compatibility View list by selecting
Compatibility View Settings on the
Tools menu.
Testing the Document Mode
As discussed in Defining Document Compatibility, Internet Explorer 8 introduces the concept of document compatibility, which controls how the browser interprets and displays Web pages. The Developer Tools enable you to dynamically choose the compatibility mode used to display a Web page. You can thus easily see visual differences between various compatibility modes, and discover the most appropriate compatibility mode for a Web page.
To change the document compatibility mode for a particular Web page, on the Developer Tools menu click Document Mode. This mode defines how Internet Explorer renders a Web page, but it has no effect on the version vector or user agent string. Using this option with the Browser Mode allows you to quickly determine which document mode is most suitable for your Web site. The Document Mode offers three options:
| Document Mode | Description |
|---|
| Quirks | When a document is rendered with no document type or a quirks document type, this behavior matches that of Internet Explorer. It is similar to the behavior of Microsoft Internet Explorer 5 and the quirks mode behavior of Internet Explorer 6, and it is the same as the quirks mode behavior of Internet Explorer 7. |
| Internet Explorer 7 Standards | This behavior matches that of Internet Explorer 7 when it renders a document that has a strict or unknown type. |
| Internet Explorer 8 Standards | This is the latest standards-compliant behavior available in Internet Explorer 8 and is the default mode used byInternet Explorer 8 to render documents that have a strict or unknown document type. |
Note Similar to changes in other developer tools, changing the Browser Mode or the Document Mode is temporary and does not affect the underlying source of a Web page. A selected mode will remain in effect for a browser tab until another mode is chosen or the tab is closed.
Outlining Objects on a Web Page
The Outline submenu of the Developer Tools menu highlights sets of objects on a Web page. This helps you understand where elements appear on the Web page, as well as the types of elements used to create specific effects. When you choose commands from Outline, Internet Explorer outlines corresponding elements. For example, if you choose the div elements command, outlines will appear around all div elements in a current Web page, as shown in the following figure.
.gif)
Figure 2. Commands on the Outline menu show where objects appear on a Web page.
To clear a set of outlines, click the appropriate command on the Outline menu, or click the Clear Outlines button on the Outline menu.
Selecting Objects on a Web Page
Many HTML and CSS developer tools operate on individual elements in a Web page. To select an element, either highlight it in the HTML tool 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 Web page. 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.
.gif)
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 tool shows the selected element's attributes, along with its location in the internal representation used by Internet Explorer 8 to display the Web page. You can view the element's current attribute values and experiment with new values by using the HTML tool 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 before ENTER. To restore the Web page to its original appearance, refresh it.
Note Changes made using the HTML tool do not affect the underlying source of a Web page; they remain in effect until a Web page refreshes, or until the browser navigates to a new Web page or is closed.
Using the HTML Tools
The HTML tools help you understand the presentation of the HTML elements on a Web page. They appear to the right of the HTML tool and include the following features:
Style indicates how your CSS rules have been applied to the selected element. It shows the attributes that have been affected and where their values are specified. A check mark to the left of each rule can enable or disable that rule; you can use check marks to experiment with the appearance of elements. The rules for an element are shown in cascading order: the last rule on the list gets applied and the rule higher on the list that gets overwritten is struckthrough.
Trace Styles displays the CSS attributes that have been applied to an element, the element where an attribute has been defined, and (if applicable) the name of the style sheet that defines the attribute's value. The rules for an attribute are shown in cascading order: the last element on the list gets applied and the one higher on the list that got overwritten is struckthrough.
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 about the box model, see the W3C's box model discussion .gif)
.
The Attributes tool displays all the attributes and their values for a selected element.
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. 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 attributes of a selected element. The values of these rules are editable: click on a value and type in a new value; a change will appear on the Web page immediately.
Using 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 display the values specified in the source of a Web page. If no values are specified, the Layout tool will display the default values used by Internet Explorer.
The innermost values are the element's height and width as defined by the offsetHeight and offsetWidth properties.
For each box model attribute, the value and unit of measurement are displayed. Click a value to edit it, then press ENTER to commit the new value, or ESC to cancel it. By default (if the unit of measurement is not displayed in the Layout tool), the Layout tool handles box model attributes as pixels.
Using the CSS Tool
The CSS tool enables you to understand the interplay between your style sheets. It is most useful for sites that use multiple style sheets. To switch between style sheets, click the Style Sheet Chooser button and the menu that shows the list of all style sheets loaded by your Web page. When you select a style sheet, the rules and their associated style attributes appear in the Primary Content pane. By default, this button shows the first style sheet referenced in your Web page. As shown in Figure 4, the style sheet's rules appear below the Style Sheet Chooser button.
.gif)
Figure 4. The CSS Tool displays the rules defined in all style sheets used by a Web page.
To expand or collapse the attributes of a rule, click the box marked with +/-. All elements in this style sheet view are editable, and the edits take effect immediately.
Saving Changes
Now that you have made changes to your HTML page and CSS files, you might want to save these changes. In the HTML and CSS tab, click the Save icon to save all changes to the current file. The Save As dialog box prompts you to save the file as .txt rather then .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 Web page rather then what is in the original source. For this reason, refreshing the current Web page, navigating away from it, or performing Undo All will bring back the original Web page.
Note As you work in the Developer Tools, remember that not only will the modified areas of a Web site differ from your sources, but other parts of it might differ as well, because the Developer Tools display your Web site 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 file.
Summary
The Internet Explorer 8 Developer Tools help you troubleshoot and resolve problems with your Web pages. The HTML tool enables you to focus on specific elements and attributes of individual HTML elements on a Web page. The CSS tool provides a larger view, showing how various rules and attributes in your style sheets are interpreted by Internet Explorer 8. Because the changes you make to the source in the Developer Tools only effect Internet Explorer's internal representation of the Web site and not the original source directly, you might choose to save the changes and use them to update your sources. This will save your time and will improve the efficiency of maintaining Web pages.
Related Topics