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.

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.

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