Tools for Analyzing AJAX Request on Popular Web Browser (Except IE)

When you working in a web application project with rich client feature for example like using full Extjs component, you must be dealing with a lot Ajax request,  you must be want to know what the server response so in local development in different kind of web browser I always using these tools.

Firefox
You can use firebug for firefox addons for seeing ajax request that sent to server and see the server response, the advantage using firebug than the webkit inspect element is you can see the server response as a simple text or as an html, but on my firefox sometimes it got some error (nothing wrong with the server but server response not displaying on firebug). After you installing firebug restart the firefox and click on the firebug icon on the right bottom.

Google Chrome and Safari
Google Chrome and Safari basically using the same popular engine namely webkit, and it used to in many mobile web browser. You don’t need any extension to see ajax request on this two browser, all you have to do is right click on your mouse and choose the “inspect element” option, and choose “Resource” Tab if you haven’t enable resource tracking you will see a screen like below.

The click the button “Enable resource tracking” then it will become like this one an you can see on the sub tab “XHR” that the ajax request that have been called to the server.

Opera
Opera use a tool called dragonfly to inspecting web page element, the way you to inspecting element is similar like chrome and safari, just right click on the opened tab and choose “inspect element” option, if you are first time using this opera will load the dragon fly for the first time use, not so long you can see a windows on the bottom, and for seeing the ajax request you can see on the Network Tab.

Well that what I always do when debugging the ajax request but too bad I haven’t found it for IE, Web Developer feature on IE seems cannot analyzing ajax request yet, and hoping a better ajax tool in IE9.