Crystal Odenkirk

If you’re using the Web Developer Add-on in Firefox, you are probably already familiar with the “View Generated Source” option (Web Developer > View Source > View Generated Source) for use in debugging code that is manipulated by javascript. But what do you do in Internet Explorer, where no such option exists?

Here’s my solution:

1) Go to the page whose generated source you want to view. Let it load in its entirety.

2) Put this in the address bar (broken to two lines to fit in my page’s width. Should be all on one line with no spaces for browser):
javascript:'<xmp>'+window.document.body.
parentNode.outerHTML+'</xmp>'

Your page will be replaced with the current state of the DOM, as Explorer sees it. xmp is a deprecated html tag that treats all the characters between the start and end tag as text instead of reading it as html. Since you can run javascript from the address bar, you can just take the whole page, put it between xmp tags, and spit it back out again. This is especially useful if you’re using browser-sniffing js to serve different js code to different browsers, because you otherwise would be unable to see the js in action in IE.

Note that this only works in Explorer, but that’s ok. If you want to see it in Firefox, it’s built right into the Web Developer’s Toolbar, or you can use innerHTML instead of outerHTML to get a similar output. The Developer Toolbar for Explorer is less reliable for viewing generated content; my experience is that it tends to get caught on a cached version of the DOM, so this trick is invaluable when you want to see the same page before and after events on the page have changed the DOM.