Thursday, March 08, 2007

View Generated Source in IE

I have "Web Developer" add-on for Firefox installed for a while. I love the "View Generated Source" function. Recently, I discovered an excellent way to add this functionality to IE by Favelet or Bookmarklet. This approach is inspired by the reference links below. I tried 2 variations of the Favelet, and end up using the first one.

javascript:void(window.open("javascript:'<xmp>' +
opener.window.document.documentElement.outerHTML + '</xmp>'"));

Good: HTML source is shown in new window.
Bad: Only works for pages served from localhost, due to IE's policy against cross domain access. However, this is not a concern for me, because the main reason I want to see "generated source" is for web development on local computer.

javascript:document.write("<xmp>"+document.documentElement.innerHTML+
"</xmp>");


To make this function easily accessible, I added it to IE bookmark "Link" folder (see screenshot below). Now, I can see the generated source (including generated HTML and Javascript) with just one click on the link named "source".



Related Links:
http://www.eggheadcafe.com/tutorials/aspnet/a4a16033-9811-45dc-8c6b-15d093c0c3ea/javascript-debugging-tool.aspx
http://ajaxian.com/archives/ie-tip-cheeky-way-to-see-the-current-state-of-the-page#comment-3928

No comments: