The following information is from a talk I presented on web dev tools for Internet Explorer at Microsoft TechEd 2007 in Orlando. It provides an overview of lightweight, in-browser web dev tools (a couple will be separate apps). I don’t go into great detail on each tool or get into overly complex debugging scenarios. However, I hope it provides some useful tips you can use immediately, as well as give you a starting point to investigate the tools further and find even more great features.

These lightweight tools don’t provide full-featured authoring or deployment environments like Visual Studio or Expression Web, but do offer significant benefits:

• They're accurate:
  • Data comes directly from the browser so you see the browser’s interpretation of the site instead of your own or the tool’s
  • Data reflects current site content rather than original since script may have modified the page
• They’re quick:
  • No round-tripping between Internet Explorer and a separate application
  • Immediately see changes
• They can improve your skills:
  • Learn quickly because it’s easy to install, load, and then inspect any site, not just one you authored

These characteristics make it ideal for a few important web dev tasks:

• Planning/experimentation
• Debugging
  • Declarative content (HTML/CSS)
  • Script
• Network traffic
• Learning

With these tasks in mind, let’s get to the tools and demos. Some of these videos I created based on my talk and others are pointers to existing videos. Enjoy!
IE Developer Toolbar
Provides a variety of tools for quickly creating, understanding, and troubleshooting webpages.

Demos:
Planning/experimentation with the IE Developer Toolbar
CSS Debugging with the IE Developer Toolbar

IEWatch
Provides detailed information about the inner workings of webpages and tools to modify them.

Demos:
Edit CSS live (rapid prototyping) with IEWatch
Script debugging with IEWatch
HTTP Monitoring with IEWatch
HTTP Profiling with IEWatch
Other IEWatch demos

DebugBar
Provides powerful features to help you inspect the DOM, HTTP traffic, Javascript, and much more.

Demo:
Quickly determine rendering mode with DebugBar

Visual Web Developer Express
Provides a fun, easy-to-use, easy-to-learn tool for new web Developers looking to build dynamic web applications.

Demo:
Script debugging with Visual Web Developer Express

Nikhil’s Web Development Helper
Provides a set of useful tools for AJAX/Javascript developers as well as ASP.NET and control developers.

Demo:
HTTP monitoring and better script errors with Nikhil’s Web Development Helper

Fiddler
HTTP debugging proxy for virtually any Windows application.

Demos:
HTTP Monitoring with Fiddler
HTTP Profiling with Fiddler
HTTP Debugging with Fiddler: AutoResponder and Fiddling

AjaxView
Client- or server-side proxy that instruments javascript to capture profiling data.

Demo:
JScript Profiling with AjaxView (see Cyra Richardson’s MIX07 talk for the rest of her presentation on script performance)

Developer Tools on Windows Marketplace
Even more developer tools to explore.
So that’s it! I hope these demos and tools help increase your productivity and make development more enjoyable. Keep following the IEBlog for more posts from me about web development tools. You can expect about one post per month on tools and naturally plenty of additional posts from other members of the IE team.
Thanks for reading and for developing on IE! John Hrvatin
Program Manager
Internet Explorer


More...