Tuesday, May 22, 2007

Viewing HTML source in AJAX-enabled web pages

Sometimes we want to view the HTML rendered by the web server for debugging purposes. We right-click on the browser (IE), select "View Source" and a neat little notepad opens up with the HTML. This is valid as long as the pages are rendered in a conventional way where the entire page is posted back for each subsequent requests.

In AJAX, where the pages are rendered asynchronously, "View Source" would only show you the HTML for the page that was originally rendered but does not show you any updates to that page modified through AJAX callbacks. 

Enter the following javascript in the address bar to view the outer HTML actually generated through AJAX Callbacks.

javascript:'<xmp>'+window.document.body.outerHTML+'</xmp>'