Debugging Tips: How to debug AJAX requests using Mozilla Firefox and FireBug
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.