Share via

IE 8 Includes Developer tools.

  • Article

from IE blog -

 

The IE8 Developer Tools are the next step in helping make developers more productive in Internet Explorer. In this post I'll introduce you to what's available in IE8 Beta 1 and point you to more detailed information about the tools.

Integrated, Simple-to-use Developer Tools

Internet Explorer 8 simplifies the process of debugging by including developer tools out of the box and making those tools easy to use. Instead of having to find, download, and install a separate debugging application, just press SHIFT+F12, or click the developer tools icon in the command bar.

Toolbar Icon

And if you want to debug JScript, switch to the script tab and press 'Start Debugging'. Even if script debugging is disabled, Internet Explorer 8 will remind you that it will refresh the page and enable debugging for only the current IE instance so you won't see script error dialogs as you browse the web. Or, if you prefer to avoid the page refresh and dialog, just enable script debugging for Internet Explorer in the 'Advanced' tab of the Internet Options Control Panel.

Here's a view of the debugger:

Debugger

We also heard your feedback about the IE Developer Toolbar's impact on performance even without the tool open, so we created a more robust design that resolves the problem. As we built on this new design for beta 1, we focused on new scenarios rather than putting back all features from the IE Developer Toolbar. As a result, you'll notice many features from the IE Developer Toolbar aren't available in IE8 Beta 1. In future betas, however, we'll continue to add new features while bringing back the functionality of the Developer Toolbar so you can continue using the features you're already familiar with.

A Visual Interface to the Platform

In addition to simplifying the debugging process, IE8 Developer Tools offer a new perspective on your site. Instead of just a source view, the tool provides visibility into Internet Explorer's internal representation of the site. For example, the DOM tree in the tool is built from the tree IE builds internally to display the page, not from your source. So if script changes the tree, IE8 shows you the updated tree. You can also view style information for an element to better understand what rules apply or what rules specify a given style property, as show below.

Element Style Info

Fast Experimentation

The Internet Explorer 8 Developer Tools also provide the ability to experiment and iterate rapidly by letting you edit a site within IE. For example, once you've found a style rule or property you're interested in, click a checkbox to enable or disable it, or click an attributes in the DOM tree to edit it in-place.

The tools also provide easy access to all available rendering modes so you can test different modes quickly:

Compatability Modes

Comments

  • Anonymous
    September 10, 2008
    This Developer Tools thing is a great idea and probably very well executed, however not on my aging Dell Inspiron 2200 (1.6 Ghz, 1.2G RAM). I have picked up some sort of bug whereby every MS Office 2007 program unexpectedly and constantly pops up the common dialog for Save As, and that weird behavior seems to have started when I got IE8, which also does some very strange things on my PC. It's so erratic I cannot use IE8 at all, with a constant flashing between modes. Clicking the Close x and typing F12 repeatedly has no effect; it just toggles between modes constantly. Any idea what's going on and how to fix it without uninstalling MS Office 2007 since it's an Upgrade? Whatever happened to Detect and Repair?? Thanks in advance for any ideas you can offer.