View html source for AJAX content with Firefox
By on June 19th, 2007

Many sites use AJAX (Asynchronous Javascript and XML) to display the content to users. It has become difficult for both developers and designers to view the html source using the regular view source method when sites display content using AJAX. The reason is because the content is not actually on the page and is being dynamically added to the page.

For example in Firefox you can go to View menu and click on View Source to view the source or use the shortcut combination Ctrl + U. But doing that on a rich site powered by Ajax will not show you the AJAX response in the source. A simple example would be Gmail just use the regular method to view the source and you would actually see some javascript code.

But there is a simple way in which you can overcome this problem using a simple solution in Firefox. All you have to do is select the text and right click anywhere on the page. Once you have done that you will see a hidden option View Selection Source. Once you click on this option you will see the actual HTML content that is used for displaying the selected content.

view-selection-source

Now you can use this method and view the html source for any website even though if uses AJAX. I find this very useful when I create AJAX based sites and want to see if the html layout is proper.

Bonus Tips

If you are viewing a site but still cannot see the actual source just right near the content. If you see a additional context menu called This Frame it means that the content you are viewing is in a frame. Just go to the This Frame context menu and select any of the options that is provided.

frame-source-tip

If you are a developer then you should definitely have the Firebug extension installed it is a awesome tool that helps in developing and deploying web sites you can also debug AJAX requests and responses using Firebug. Firebug allows you to edit, debug, and monitor CSS, HTML and Javascript live for any web page.

Download Firebug for Firefox

Tags: , ,
Author: Keith Dsouza Google Profile for Keith Dsouza
I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website. I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.

Keith Dsouza has written and can be contacted at keith@techie-buzz.com.
  • http://publish.uwo.ca/~ntoljic Nikola Toljic

    thanks for the tip

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN