Having been mostly immersed in the middle-tier during my work thus far on MSN, my web UI and AJAX blog entries have been somewhat limited. And while I posted a few tech book review articles on AJAX, most of these were carried over from my original http://yowhann.googlepages.com/ site.
But with the release of the latest IE Developer Toolbar (now in Beta 3) two days ago (1/12/2007), I now have an opportunity to catch up on my JavaScript entries and in particular client-side tools to play with.
Having worked on a "web 2.0" product (responsive, rich user experience in a thin client including context menus, drag 'n drop, etc) in the last release cycle at my previous company, I know that a feature I wanted in the IE Dev Toolbar was a way to quickly view the generated source vs. the original html output. This would have come in handy for all the updates to the UI made via DOM and JavaScript based on web responses from asynchronous calls. It's also handy for just regular DHTML (updating html via JavaScript). Back then (~6 months), you could still troubleshoot and debug by using the existing "View DOM" feature and drill down to your elements of interest. However, this new feature adds a quick way to reference the updated output, not to mention take snapshots of different states.
As some of you know, the Web Developer Plugin for Firefox offers a menu item to "View Source" and to "View Generated Source". And IE Developer Toolbar has caught up to this with the release of Beta 3. In the screenshot below, you can see how to "View Generated Source".
If you go to the Beta 3 Download Page, you will be able to see some of the other changes/improvements made from the previous release of IE Developer Toolbar. The "View Generated Source" feature is the one I feel that stands out the most for client-side developers building web applications these days. As with the previous release of the toolbar, it will work with IE6 and IE7.
Below is a quick and dirty example IE Dev Toolbar's View->Source->Original (aka "View Source") and View->Source->DOM (Page) (aka "View Generated Source").
IE Developer Toolbar Beta 3
View->Source->Original (aka "View Source")
View->Source->DOM (Page) (aka "View Generated Source")
