My personal favorite is an add-on for firefox, it is called firebug. Best of all, it is cross platform so if you want to use it on Linux or Windows you can. It is also free. It it very easy to install, you just go to their website and download the add-on on the right side of the page. Firefox will restart and you will have it ready to use.
The interface of firebug is fairly simple. The main panel has 6 tabs Console, HTML, CSS, Script, DOM, and Net.
- HTML: Shows HTML as an indented hierarchy of DOM nodes, which you can expand to see or hide child nodes.
- CSS: Allows you to view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Edit”.
- Net: Shows all the information that was downloaded, how long each resource took to download, the HTTP request headers and server response sent for each resource. Their is also an XHR tab is very useful for AJAX debugging.
How is it useful for debugging:
The feature that I find most helpful in debugging AJAX is the console.log. It allows you to reload components of the page without having to reload the entire page. If you reload the entire page it will rest all the HTML, JS and CSS to what is defined in the static files. Their is a console API that makes the console tab very useful. Their is more info about the API here.
Some issue with Firebug: