“No More Ajax Headaches”

Ajax is awesome. Yes, it is pretty nice not having to refresh the browser. But as a developer, you probably will eventually run into an Ajax bug sooner and later. And ARGH! What is happening to your XMLHttpRequest? Ajax issues can be harder to debug because you can’t be always sure what happens to your Ajax call. Is it really being sent? Or is the code that your calling crashing?There is one tool that every web developer should install immediately after they install Firefox (and maybe StumbleUpon). It will help you with HTML and CSS formatting and layout problems. It will help you debug JavaScript with a full function debugger. It will also find out what’s taking your site forever to load and what Ajax calls you’re making!
The name is Firebug.

Let’s first have a quick review of how Ajax works. XmlHTTPRequest is the heart of Ajax. WhFen you start an Ajax call, you use XmlHTTPRequest to send a request to a web server to execute code/return information you want. For example, in a site, I want to post a comment without having the user reload the page. Therefore, I would submit an XmlHTTPRequest to a file, say submit_comment.php, with the POST headers, title, body, and author (just as you would do with a PHP form). Now, submit_comment.php will run with the given information and most likely print out some XML, JSON, or information that will be received by your Ajax call to process. This could be a confirmation code/message or actual HTML to print out. However, this path of information during the Ajax call is invisible to the user. This is what makes Ajax harder to debug. For more on how to use Ajax, check out Prototype or jQuery, JavaScript frameworks that will make Ajax and other JavaScript tasks much easier.

How Firebug will save your life is by outputting all the information that you need to make this information transfer not so transparent. Install Firebug and open up your site that will make the Ajax call. Run the JavaScript code that will make the XmlHTTPRequest to your backend code. When XmlHTTPRequest fires, Firebug logs the headers and the parameters that are passed to your backend file. Open the Firebug console and visit the Console tab. If your call was successful, you should see an entry that starts with either GET/POST (depending on your call), followed by the file that it called (as well as the time it took before you received the response). Click the request to get more information.

Click the Post/Param tab to see what information you passed to your backend code. This tab should show every variable you passed to your backend code shown in key/value pairs.

If you don’t see an entry in your Console, you can be assured that no XmlHTTPRequest call was initiated (unless Firebug is disabled or you cleared the console). That’s step one in debugging your Ajax application.

Now you know what information your backend code is given. What goes on there is still invisible to you but there are several ways to solve this. One, you can edit your JavaScript to output the responseText/responseXML that is passed back. Another way is to insert the output into a database and examine it that way. Of course, the easiest way is with Firebug. Whatever is outputted by your backend code is passed to your XMLHttpRequest call as XML, JSON, or just plain text. Whatever it is, it will be shown in the Response tab of your Firebug console. The advantages of Firebug is that you don’t have to edit your frontend code and it allows to separate your data from presentation.

You can output print whatever you want in your backend code to debug your Ajax call (maybe use print_r($array) to show the contents of an array) which will promptly be shown in your Firebug console.

This does not even begin to cover all the uses of Firebug, which will become any web developer’s best friend. Be sure to browse the Firebug documentation about live code editing (HTML and CSS), JavaScript debugging, presentation debugging (inspecting style, layout, and DOM properties), and profiling. Now only if Internet Explorer, who really needs it, supported Firebug…

search firebug in google adn install it as a add on on mozilla/FF

Have fun