View the ‘real source’ of a webpage

One great thing about the web is that you can tell your browser to “View Source” whenever you want to figure out how the page managed to get all those hamsters to dance like they do. Or at least that was how it used to be — nowadays most interesting pages are dynamically generated, which means the source you see often little more than .

When I was writing dynamic pages for a project a little while back I got tired of not being able to see what my page looked like after all the JavaScript got done with it, and eventually I tracked down this cute little bookmarklet:

javascript:if (window.document.body.outerHTML != undefined) {''+window.document.body.outerHTML+''} else if  (document.getElementsByTagName('html')[0].innerHTML != undefined) {''+document.getElementsByTagName('html')[0].innerHTML+''} else if  (window.document.documentElement.outerHTML != undefined) {''+window.document.documentElement.outerHTML+''} else {alert('Your browser does not support this functionality') };

Just copy it all into one line (remove the linefeeds, they’re just there for readability) and put it as the URL of a bookmark. Then whenever you want to see the real source of a page, it’s just a click away.

(I wish I could remember where I found this little gem, but from a quick search it looks like it’s been floating around for a while…)