A Quick Way to View the Generated Source Code

While each major browser has its own scripts and plugins for viewing the generated source code, there's nothing really universal except for the innerHTML/outerHTML method (from what I've found online).

The following bit of code is that very method presented in an easy to use way. It's CSS/HTML code that you can throw in and out of your page while developing. The code will allow you to view, select and copy the generated source code in IE, Firefox, Safari and Opera.

One note: After you click on 'View Source' a text area will appear. Press CTRL + A to select all of the text or just scroll through it. To close the text area, click anywhere on the page. (to bring it back, press the 'View Source' button again)

<style type="text/css">
textarea#doc_source { position:fixed;z-index:1000;bottom:10px;right:20px;width:600px;height:300px;display:none;overflow:scroll; }
input#doc_button { position:fixed;z-index:1000;top:10px;right:20px;width:120px; }
</style>
<!--[if lte IE 6]> <style type="text/css"> textarea#doc_source { position:absolute; } input#doc_button { position: absolute; } </style> <![endif]-->

<textarea id="doc_source" onblur="this.style.display='none';"></textarea>
<input id="doc_button" type="button" onclick="document.getElementById('doc_source').style.display='block';document.getElementById('doc_source').value='';document.getElementById('doc_source').value=document.documentElement.innerHTML;document.getElementById('doc_source').focus();" value="View Source" />

I should mention that in IE6 and below the button and text area do not follow you as you scroll down the page due to IE6's fixed position bug. Bleh.

Feel free to try it out yourself - click the button at the top right of the page.