Developer Tools in Internet Explorer 8 Beta 2

Great tools play a critical role in developer productivity, and while many web development tools exist, they likely don’t meet your needs in all tasks. For example, you may want to quickly debug JavaScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem.

In order to improve developer productivity in these and similar scenarios, Internet Explorer 8 Beta 2 includes powerful, yet easy-to-use tools that have a few important characteristics.

Integrated and Simple to Use

Every installation of Internet Explorer 8 Beta 2 includes the Developer Tools. This enables debugging anywhere you find Internet Explorer 8 Beta 2, whether it’s your dev machine, test machine, or a client’s machine. In addition, by avoiding the use of an extension we limit the impact of the tools on browser performance to only the times when you open the tools. Internet Explorer 8 Beta 2 also includes on-the-fly script debugging so you can enable debugging as needed for only the current Internet Explorer process rather than enabling debugging for all of Internet Explorer and accepting degraded performance and regular script error dialog boxes.

Provide a Visual Interface to the Platform

Instead of reverse engineering how your site works or modifying your site to output debug information, the Developer Tools let you look into Internet Explorer to view its representation of your site. This reduces the time you spend debugging dynamic sites where source inspection isn’t useful or investigating a behavior specific to Internet Explorer where a generic authoring tool cannot help.

Enable Fast Experimentation

When prototyping a new design or testing fixes in previous versions of Internet Explorer, you likely edit your source, save it, refresh your page in the browser, and repeat. The Internet Explorer 8 Developer Tools streamline this scenario by letting you edit your site within the browser and see changes take effect immediately.

Optimize Application Performance

Identifying and fixing performance issues is usually an iterative approach done by focusing on one scenario at a time. With the Internet Explorer 8 Developer Tools script profiler, you can collect statistics like execution time and number of times a JavaScript function was called as you test your application and use the profile report to quickly identify and fix performance bottlenecks.

With these characteristics, the features of the Developer Tools will dramatically improve your productivity when developing in Internet Explorer. The rest of this article explains many of these features in more detail. For complete documentation of all features, including keyboard shortcuts, visit the Internet Explorer Developer Center on MSDN at http://msdn.microsoft.com/ie.

Getting Started

Getting started with the tools is simple: press F12 or click Developer Tools on the Tools menu of either the menu bar or the command bar. You can also add the Developer Tools icon to the command bar for quick access by right-clicking on the command bar, selecting Customize, and then Add or Remove Commands... Find the Developer Tools icon in the list on the left and click Add. Click Close and the new button will appear in the command bar.

Once open, the tools exist in their own window, each one connected to a single tab in Internet Explorer. If you prefer to decrease the number of open windows, pin the tools within a tab by clicking the “Pin” button or pressing CTRL+P.

Some features of the tools don’t need the complete tools interface. In that case, click the Minimize button or press CTRL+M when the tools are pinned. The tools become a row at the bottom of the window, providing access to all menu items and the document and browser modes without filling all the screen space used by the full user interface.

Inspect and Edit HTML and CSS

The tools give you visibility into the browser so you can inspect your site’s HTML and CSS as it exists inside Internet Explorer instead of just the source. This is particularly helpful on dynamic sites, complex sites, and sites that use frameworks like ASP or PHP.

The primary view in the tools displays the site’s Document Object Model (DOM) tree, which reflects the one maintained by Internet Explorer to represent the site in memory. You can navigate the tree with the mouse or the keyboard, but a quick way to find the node for a specific element on the page is turning on “Select Element by Click” and clicking the desired element on the page. The tools will automatically select the corresponding tree node.

If a site uses script to modify the tree, as many do, you’ll want to view the latest tree so click the Refresh button in the tools to acquire the latest tree from Internet Explorer.

Inspect Style and Other Information for an Element

Once you’ve selected an element in the DOM tree, the right-hand pane exposes more information about the element.

When debugging the positioning of an element, use the Layout pane to find box model information such as the element’s offset, height, and padding.

The Style pane improves CSS debugging by providing a list of all rules that apply to the selected element. The rules display in precedence order so those that apply last appear at the bottom and any property overridden by another is struck through, allowing you to quickly understand how CSS affects the current element without manually matching selectors.

If you’re looking for information about a specific property, switch to Trace Styles. This pane contains the same information as Styles except it groups it by property, as shown in Figure 1. Simply find the property that interests you, click the plus, and view a list of all rules that set that property, again in precedence order.

To further inspect CSS, switch to the CSS tab for a list of all CSS files for the current site, as shown in Figure 2.

Live Editing

After using the tools to gather important information about your site, you need to be able to take action quickly. Instead of editing your source, saving, and refreshing, edit within the tools by clicking on HTML attributes and values and CSS rules and properties to make them editable. Just click, type the new value, and press ENTER. The change takes effect immediately so you can quickly test changes. In HTML, you can also press the Edit button to make the entire tree editable and then add, remove, or edit complete elements. In either case, the Developer Tools enable quick editing without modifying your source.

Save Changes

All changes made in the tools only exist in Internet Explorer's internal representation of the site. Therefore, refreshing the page or navigating away brings back the original site. However, in some cases you may want to save the changes. In the HTML and CSS tabs, click the Save button to save the current HTML or CSS, respectively, to a file. Remember that not only will the areas of your site that you modified differ from your source, but other parts may also differ since the tools display your site as it exists in Internet Explorer rather than in your source. To prevent accidentally overwriting source, the tools save the output as text and add a leading comment to the file.

By: John Hrvatin

John has been a Program Manager on the Internet Explorer team in Redmond, Washington, since 2004. He works on Internet Explorer 8’s Web developer tools and platform performance.

John.hrvatin@microsoft.com

By: Deepak Jain

Deepak is a Sr. Program Manager in the JScript team located in Hyderabad, India. Deepak is focused on building tools that make JavaScript programmers more productive.

Deepak.jain@microsoft.com

By: Sameer Chabungbam

Sameer Chabungbam is a Program Manager in the JScript team at Microsoft, where he is focused on building tools for JavaScript programmers. Sameer has recently worked on JavaScript editing features in Visual Studio 2008.

sameerch@microsoft.com