Showing the rendered source

When working with highly dynamic websites, one problem is the view-source doesn’t show the dynamic content that was generated. What you want is a snapshot of the DOM at the time.

I decided to whip one up into my AJAX debugging framework after which Joseph suggested that it be a bookmarklet instead.

rendered source

Here is the source code:

<br /> javascript:(function(){pSs=window.open(”,’pSsnap’,'height=400,width=400,menubar=yes,scrollbars=yes,resizable=yes’);pSd=pSs.document;pSd.open(‘text/plain’);pSd.write(document.documentElement.innerHTML);pSd.close()})();<br />

It still has a bug in that it is rendering the HTML when I passed in text/plain. Here is an alternate:

<br /> javascript:(function(){pSs=window.open(”,’pSsnap’,'height=400,width=400,menubar=yes,scrollbars=yes,resizable=yes’);pSd=pSs.document;pSd.write(‘ <pla'+'intext>‘+document.documentElement.innerHTML);pSd.close()})();<br />

The problem with that is certain tags are filtered out in the <plaintext> rendering. (You can view source it).

Also, I use the innerHTML since I don’t think Mozilla has an outerHTML property.

Not sure what to do.