View generated source in Internet Explorer

The Web Developer extension for Firefox is in invaluable when you are writing JavaScript that dynamically changes the HTML on a Web page. The feature I use most often is:

right-click > Web Developer > View Source > View Generated Source

This shows you the HTML as it is at this moment in time, rather than the original HTML that came down the pipe.

Microsoft's Internet Explorer Developer Toolbar provides some useful functionality for the Web developer, but it doesn't have a View Generated Source option. However, I remembered an old posting (from March 2004) that had a way of viewing dynamically modified source for IE:

www.itauthor.com/notes/archives/2004/03/viewing_dynamic.html

The trick is to paste the following into the IE address bar:

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

This opens a new window or tab and shows the generated source. I've been using it in IE7 and it's a God-send.

BTW: to get the Internet Explorer Developer Toolbar, visit:
www.microsoft.com/downloads/

If you're likely to find this useful, a handy tip is to create a shortcut. For example, from a Web page (not the JavaScript-generated page), drag the icon in the address bar to IE's Links toolbar. Right-click the new shortcut and choose Properties. In the Properties dialog box, change the name of the shortcut to "View Generated Source" and the URL to the JavaScript in the box above.

Now whenever you're browsing in IE, you can click this link to see the generated source.