Improved Productivity Through Internet Explorer 8 Developer Tools

[NewsBot]

Over the past year, I’ve written about different tools to help web developers become more productive when developing in Internet Explorer. These tools came from partners inside and outside Microsoft. One – the IE Developer Toolbar – came from the IE team in response to your requests for a free, lightweight tool to help debug your site in IE.

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.

http://ieblog.members.winisp.net/images/Toolbar.Icon.png

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:

http://ieblog.members.winisp.net/images/Debugger.png

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.

http://ieblog.members.winisp.net/images/ElementStyleInfo.png

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:

http://blogs.msdn.com/blogfiles/ie/WindowsLiveWriter/ImprovedProductivitythroughInternetExplo_A60E/clip_image007%5B4%5D_thumb.jpg

By removing the need to save changes, switch between applications, and refresh the page, the tools make it faster and easier to test, debug, or just experiment.

More Information

 

For more information about the Internet Explorer Developer Tools, check out these resources:

• Internet Explorer 8 Beta 1 – download the beta, try the tools, and tell us what you think!
  
• Developer Tools whitepaper
  
• Developer Tools SDK page
  
• Demo video: overview (video version of this post)
  
• Demo video: debugging (~6min)
  
• Internet Explorer 8 Beta 1 Release Notes

Thanks!

John Hrvatin

Program Manager

Internet Explorer

http://blogs.msdn.com/aggbug.aspx?PostID=8058759

 

More...

 

 

View All Our Microsoft Related Feeds