Wednesday, July 08, 2009

Doing "View source" for JavaScript generated page

By JavaScript generated page I mean a page that is mostly constructed using JavaScript's document.write(...) statements. This is mostly the case when you make use of UI frameworks like YUI.

Recently one of my friends approached me to help him with trouble shooting a page which was developed using YUI. We spent some time trying to figure out how to view the source of the page that we were viewing. When we did a right click and "View source" in Firefox, all we saw was a bunch of JavaScript sources being included. Nothing more.

So here is how you can easily view the source. Install "Execute JS" plug in. Then load the page you would like to view source. Then you click on "Tools -> Open Execute JS". Then check the "Content Window" and choose the title of the window that you would like to view the source for. Now in the "JS-Code to execute", just type the following:
document.documentElement.innerHTML
Then click on "Execute". You will find the HTML Source of the page displayed in the bottom pane. Execute JS is pretty powerful that you can type any arbitrary expression and execute.

Hope that helps.

No comments: