Debugging Tips: How to debug AJAX requests using Mozilla Firefox and FireBug

As the world of internet grows day to day, the more educated and ever-wanting userbase now needs more data asynchronously. They don’t like to wait or load another page to see their data. In such situations we developers need to use more and more AJAX (Asynchronous JavaScript and XML - http://en.wikipedia.org/wiki/Ajax_(programming)) in the development of websites. Using AJAX in your web-development workflow is not that much difficult as you think. There is already a wide range of famous ajax libraries that make handling asynchronous requests easy for us.

The next problem that quickly comes to our minds is how to debug these requests. Debugging such requests primarily involves seeing the requested URL, the parameters passed and of course the responses.

Here comes FireBug to your rescue. Yes that’s the same FireBug you use to debug common HTML and CSS issues from within Firefox. If you haven’t already heard about FireBug, it is a Firefox addon (https://addons.mozilla.org/en-US/firefox/addon/firebug/) that turns your favourite opensource web browser into an almost complete realtime web-development IDE.

Fire up Firebug in your browser window and click the console tab, along the top of the firebug panel that shows up. You might have to enable it if it’s not already populating data. Refer the attached screen shot (fig.1.1)

Then initiate your ajax request with whatever initiation method you have defined for that (clicking a link/button, or something like that). Then you can see the corresponding ajax request url in the console. If you want to see more details about that request, just click on that line in the Firebug panel.

Every request contains 4 sections - Headers, Post, Response, HTML. Select each of the tabs to see more details on what’s happening underneath. That should be it. Enjoy the vast amount of information that turns up at your fingertips, and make the best use of what you have.

Happy Debugging!