View Rendered Source in Internet Explorer

April 20th, 2009

IE 6 and 7 can be a nightmare for debugging Javascript, especially after working with the quality tools available for other browsers such as Firebug for Firefox. However, one small step in the right direction would be the ability to View Source for the currently rendered page, after Javascript has been executed (since typically the View Source command displays the source code as it was sent by the server, prior to any script execution).

To do this, you need to create a small Javascript bookmarklet: View Rendered Source (right-click this link and Add To Favorites), that will take the current page's HTML source, in its current state (even if modified by scripts, AJAX calls, etc.), and display it in a popup window. This source for this bookmarklet is the following:

javascript:(

function(){
  var c = unescape(document.documentElement.innerHTML);
  c=c.replace(/&/g,'&');
  c=c.replace(/%3C/g,'<');
  c=c.replace(/%3E/g,'>');
  var x = window.open();
  x.document.write('<html><head><title>Rendered Source</title></head><body bgcolor="#ffffcc"><pre>' + c + '</pre></body></html>');
  x.document.close();
}

)();

Looking at the above, we can see that we're getting the document's innerHTML, replacing HTML Entities with safe substitutes, opening a new popup window, and writing the source code to the popup.

Now you can at least see what your script is up to, as IE sees it.

Filed in Programming, Web design & hosting

Add Your Comment

Note: all fields are optional