Using the Windows Internet Explorer 8 Developer Tools to Fix Your Site

This article contains information about Internet Explorer 8 Beta 2. For up-to-date information, see Discovering Internet Explorer Developer Tools.

Windows Internet Explorer 8 introduces a new set of developer tools that can help identify and resolve issues with the HTML, Cascading Style Sheets (CSS), and script of Web pages. Developer tools assist the Web developer in a variety of tasks, including viewing individual attributes, determining why a particular CSS rule is applied to an element, runtime debugging of script, and previewing a Web page using different document compatibility modes.

This document describes the general use of the Developer Tools as well as the functions and use of the four main modes of which these tools consist. They are

The HTML mode, which allows you to view the underlying code behind your pages, outline and select individual elements, preview how certain attribute value changes will affect the rendering of your page, and view how your CSS rules have been applied to individual elements.
The CSS mode, which allows you to understand how your various style sheets affect your Web page and therefore is the most useful for sites that use multiple style sheets.
The Script mode, which allows you to debug the scripts used on your Web page. It will allow you to step through the code, insert breakpoints and watches, and inspect variables.
The Profiler mode, which allows you to analyze the performance of the underlying code behind your pages and to locate functions that may not be performing optimally.

Opening and Closing the Developer Tools

You can open the Developer Tools by pressing F12 or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar. Figure 1 shows the Developer Tools menu option highlighted in the upper right corner of Windows Internet Explorer.

Figure 1

The Developer Tools window appears in front of the Windows Internet Explorer window. Developer Tools can be closed just as they were opened, by pressing F12, or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar.

Important: Any changes made using the Developer Tools are temporary and do not affect the underlying source of your Web page. The changes will revert when the page is refreshed, the browser navigates to a new page, or the browser window is closed. HTML and CSS changes can be saved to a text file by clicking the Disk (Save) button on the Developer Tools toolbar.

Previewing Different Compatibility Modes

Windows Internet Explorer 8 introduces document compatibility modes that change the way Windows Internet Explorer 8 renders your Web page. For more information about the different document compatibility modes supported and how to implement them, read META Tags and Locking in Future Compatibility.

You can see the visual difference between different compatibility modes by using the Developer Tools. To change the document mode for a given Web page, choose the desired mode on the Document Mode menu on the Developer Tools menu. A check mark indicates the selected compatibility mode. The options include Quirks, Internet Explorer 7 Standards, or Internet Explorer 8 Standards. To change the browser mode, choose the desired mode on the Browser Mode menu on the Developer Tools menu. A check mark indicates the selected compatibility mode. The options include Internet Explorer 7, Internet Explorer 8, or Internet Explorer 8 Compatibility View.

Outlining Elements

To help you understand where elements appear in a Web page as well as the types of elements used to create specific effects, you can choose to outline certain elements. When you choose commands from the Outline menu, Windows 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.

Using the HTML Mode

The HTML mode allows you to view the underlying markup behind your pages, select individual elements and view their attributes, preview how certain attribute value changes will affect the rendering of your page, and view how your CSS rules have been applied to individual elements. You can click the HTML tab in the Developer Tools window to access the HTML mode. Figure 2 shows the HTML tab selected in the top left corner of the Developer Tools window.

Figure 2

Appearing to the right of the HTML window pane are tools designed to help you understand the presentation of the HTML elements of your Web page.

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 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.
The Layout tool displays the attributes of the element's box model, which in turn shows how the elements in the content area center are affected. For more information regarding the box model, see the W3C's box model discussion.
The Attributes tool displays the attributes of the selected element in the HTML tab. The current node is displayed in the tool. Attributes can be easily added or deleted to the selected node using this tool and then updated in the browser window.

Figure 3 shows the Style, Trace Styles, Layout, and Attributes buttons, which are located to the right of the HTML pane.

Figure 3

Selecting Elements and Changing Attribute Values

You can select an element either by highlighting it in the HTML pane or by using the Select Element by Click tool on the Developer Tools toolbar. Figure 4 shows the Select Element by Click button highlighted in the upper left corner of the Developer Tools window. The Select Element by Click tool lets you select any element on the browser page by a single click on that element. The clicked element is selected in the Developer Tools window.

Figure 4

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 mode to change them. To change an attribute value, click the attribute value you want to change in the HTML tab or double-click the value to change in the Attributes tool. Then enter the new value and press ENTER. When you do this, Windows 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.

Using the Style and Trace Styles Tools

The Style tool displays all style rules that apply to the selected element in cascade order, with overruled styles struck through. Use the checkbox next to each rule to enable and disable that rule and then view the effect immediately in Windows Internet Explorer. The Trace Styles tool shows the computation of a specific style property. In this view, styles are grouped by property instead of by rule. This makes the computed value of a property immediately visible. Expanding the property displays all rules that set that property, again in cascade order to show how Windows Internet Explorer determined the final result.

Style values in both tools may be changed by clicking the value on the display and entering a new value. The new value is committed by removing focus from the editable value, or press ESC to abort the change.

Figure 5 shows the Style tool with a rule disabled.

Figure 5

Understanding the Layout Tools

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 Windows Internet Explorer.
The innermost values are the element's height and width, as defined by the 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. Figure 6 shows the Layout tool display with an element selected in the HTML pane on the left.

Figure 6

Viewing Attributes Using the Attribute Tool

Windows Internet Explorer 8 Developer Tools also includes a tool to view the attributes of an element. To use the attribute tool click the Attributes button at the top right. The current Web site’s HTML elements are displayed in left pane while in the HTML tab. If you select an element, a list of its attributes will be displayed in the right pane. Checking the Show Read-Only Properties check box will cause the Attribute tool to display a list of all properties of the selected element. Figure 7 shows the attribute tool selected with a list of attributes for the HTML element.

Figure 7

You can add or remove attributes by clicking the or buttons at the top of the Attributes tool window. A combo box lets you select the attribute to add.

Using the CSS Mode

The CSS mode allows you to see how your various style sheets affect your Web page, making it the most useful mode for sites that use multiple style sheets. You can click the CSS tab in the Developer Tools window to access the CSS mode. Figure 8 shows the CSS tab selected in the top left corner of the Developer Tools window.

Figure 8

The CSS mode toolbar includes a combo box that lets you select a style sheet loaded by your Web page and display the properties. The rules in the style sheet appear below the style sheet button, and you can expand or collapse the attributes of the tree. Individual rules can be enabled and disabled by checking the checkbox next to each item.

The values for each property can be changed just as in the HTML mode, by clicking the value, entering a new value, and removing focus from the field.

Using the Script Mode

The Script mode allows you to debug scripts on your Web page by allowing you to step through the code, insert breakpoints, and inspect variables. By providing a built-in lightweight debugger that lets you set breakpoints and step through client-side script, the Developer Tools enables you to debug your scripts without leaving Windows Internet Explorer. You can click the Script tab in the Developer Tools window to access the Script mode. Figure 9 shows the Script tab selected in the top left corner of the Developer Tools window.

Figure 9

Starting and Stopping Debugging

You can start debugging by clicking the Start Debugging button. While debugging, all scripts on the site, including separate files and inline script blocks, are available in the drop-down script list. You can stop debugging by clicking the Stop Debugging button.

Setting Breakpoints

While you are debugging, any runtime errors will cause the debugger to break automatically at the error location. Windows Internet Explorer will pause and highlight the line that caused the error in the Source View window.

Note: While Windows Internet Explorer is waiting for input from the script debugger, it will not respond to any user interaction.

You can also choose where to halt the execution by setting a breakpoint. A breakpoint causes script execution to pause immediately before the breakpoint line executes. The debugger highlights the next line that will execute in script Source View. Breakpoints can also be set after you start debugging. You can set a breakpoint by clicking next to a line number, through the right-click context menu, or by pressing F9.

The Breakpoints tab of the debugger contains a list of all available breakpoints. Figure 10 shows the Breakpoints tab selected to the right of the debugger tool pane.

Figure 10

Here you can find the location of all breakpoints along withthe filename and line number. Double-clicking on a breakpoint in this list navigates you to the breakpoint location in the source code. You can deactivate a breakpoint without removing it from the source code by clearing the checkbox next to the breakpoint. To remove a breakpoint, right-click and select Delete.

Note: Even if you navigate away from the current site, Windows Internet Explorer will maintain the breakpoint information until you close the Developer Tools.

Inspecting Variables

You can inspect script variables whenever execution is paused at a breakpoint. The Locals tool of the debugger displays the name, value, and type of all variables available in the current execution scope. Variables out of the execution scope are undefined. The execution scope is the range in which a variable can be referenced. Figure 11 shows the Locals tool selected while debugging.

Figure 11

You can watch variables from different scopes by adding them to the Watch tool. You can set a watch variable by selecting the source text, right-clicking, and choosing Add Watch. This will add a watch for the identifier on which the cursor was set. Figure 12 shows the Watch tool selected, while debugging with a variable being watched.

Figure 12

You can also add a watch variable by clicking the “Click to add…” text in the Watch window and typing the variable name.

Using the Profiler Mode

You can use the Profiler mode to investigate your Web site’s execution time using information gathered by Profiler as the Windows Internet Explorer renders your Web site. This information is helpful to target optimizations if a piece of code is causing excessively long execution time, or a bottleneck.

To use the Profiler mode select the Profiler tab at the top left of the window. To start profiling, click the Start Profiling button at the top of the window. The Profiler then begins analyzing Websites that are rendered in Windows Internet Explorer. To profile a Website, navigate to the URL and the Profiler mode will collect data while the page is rendered. Click the Stop Profilingbutton to view the report generated by Profiler. Figure 13shows the Profiler mode with a report loaded.

Figure 13

The report displays the functions that were used by Windows Internet Explorer to render the URL. The name of the function, the number of times the function was called, the inclusive time, and the exclusive time. The inclusive time is the amount of time spent within a function including the time spent in functions called from that function. The exclusive time is the amount of time spent within a function excluding the time spent in functions called from that function.

Using the information collected by Profiler, you can locate any bottlenecks that may be in your Web site code. Locating and restructuring code or algorithms that do not run efficiently will decrease the amount of time Windows Internet Explorer spends rendering your Web pages.