Monday, May 12, 2008

View dynamically generated HTML in IE


Have you ever wanted to see the dynamically generated HTML of a page? If you use AJAX or lot of Javascript, I am sure you have added HTML content to your page on the fly and you wanted to see the active HTML source of that page, since IE only shows the original HTML source.

Perhaps you already know about how to do this, but, I often use this little Javascript code snippet to see the active content of a page and it really comes handy while developing web pages that use lot of Javascript to dynamically add content:

javascript:
window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);

I simply type this in the address bar and viola, I have the current HTML source of the page popped up in a new browser window. Better yet, I created a bookmark link using this snippet and every time I need to see the active HTML source of a page, I just click on this link.

Here are the steps to add a bookmark link for this Javascript snippet:
  1. In IE, press Ctrl+D to bring up "Add a Favorite" dialog
  2. Give it a name, something like "View Active Source"
  3. Use Links folder to create in and OK the dialog
  4. Have the Links toolbar displayed in your browser if it is not already
  5. Right-click on the "View Active Source" button > Properties
  6. In the "Web Document" tab, type the above line "javascript:..." in the URL box and OK the "View Active Source Properties" dialog
  7. Click "Yes" to the following warning message:
    The protocol "javascript" does not have a registered program. Do you want to keep this target anyway?
  8. Now, click on the button "View Active Source" in the Links toolbar and now you should be able to see the active HTML of the current page in a new window
There are few gotchas that you should be aware of as listed below. Use this snippet at your own risk and be warned that getting same Javascript code to consistently work across multiple versions of IEs is like peeling onions:
  1. As my title indicates, I have only tested this in IE and do not know if it works in other browsers or not. On that thought, other browsers might already provide this functionality and I remember hearing from a friend that Firefox does
  2. It won't work if Popup Blocker is turned on
Hope you find this useful and if you know any other cool ways to see the active HTML content of the page, please let me know.

Thanks for visiting my blog.


Sonny

6 comments:

Anonymous said...

Works great!, but all the commands are Capiltal letters.

Anonymous said...

That was really helpful.

SonnyN said...

Glad to hear that folks finding it useful.

Anonymous said...

You write very well.

Amit said...

You're a lifesaver.

Owen Corpening said...

2012 and found this extremely useful in IE8 ('links' toolbar is now called 'favorites').

Amazing that IE does no show the active src - even in the F12 you have to hit its refresh button.