AJAX Debugging
Category: Ajax Resources
Debugging ajax has will always be difficult because of its mixture of JavaScript and other languages, but there are a few ways to make your debugging go a lot smoother and less stressful.
Firebug
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.
Interface:
The interface of firebug is fairly simple. The main panel has 6 tabs Console, HTML, CSS, Script, DOM, and Net.
- Console: This is where JavaScript error messages are displayed, but you can also interact with the page by entering JavaScript commands into the console tab.
- 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”.
- Script: Shows the javascript files and the calling document. See list of included JavaScript files 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 “Inspect”. Set breakpoints and conditions under which break points appear.
- DOM: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
- 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:
I have noticed that occasionally that webpages will never completely load or my browser will crash when I go to them. The easiest way to correct these issues to to only turn on Firebug when you are using it. The reason why a page will never completely load is because there may be a JavaScript error on the page, and Firebug has put a breakpoint at the error and stopped the script. The reason why your browser crashes is because Firebug keeps track of all the error on the pages. This can take up a lot of system memory, which can crash your browser.
Comments
Leave a Reply