FireBug, AJAX debugging tool for Firefox and much more
FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter. The FireBug console is intuitive and very easy to use, just don't forget it working after you finish debugging because you'll feel that the web is all buggy !
After installing the extension and restart, the console is automaticly launched in the bottom of every firefox page, displaying all Javascript errors that occurred for the page you are looking at, and objects or text that have been logged from various places.
The main features of FireBug include :
Log DOM Elements With Your Mouse
Using the "Pick Element" tool, you can click DOM Elements in the page to print them to the console. Once they are in the console you can inspect them using a simple strip of tabs.
Log Objects From The Command Line
There is a command line at the bottom of the console which allows you type in arbitrary Javascript expressions. The result of the expressions is printed to the console, where you an the inspect it further using the tabs.
Log Objects From Your Web Page Scripts
If you've ever wished you could tap your toes together and turn "alert" into "printf" or "System.out.writeln", FireBug is your fairy godmother. It is trivial to log text or objects to the FireBug console from Javascript inside any web page. Go here to find out how.
XMLHttpRequest Spy
Each XMLHttpRequest can be automatically logged to the console, where you can inspect its response as text or xml. Not only is this extremely useful for debugging your own Ajax code, but it's also quite fun to analyze how other web pages use Ajax!
Contextual Error Display
Unlike the the Firefox Javascript Console, FireBug's console will only show you errors for the page that you are looking at. As you browse from page to page or switch between browser tabs, the console will follow and only show information that is relevant to that page.
Error Status Bar Indicator
Whenever a Javascript, CSS, or XML error occur, a little red indicator will appear in the Firefox status bar. Clicking the indicator will bring up the console with more detail about the errors.
Error Filtering
FireBug allows you to filter what kind of errors you want to appear in the console. This is handy for hiding all those annoying CSS errors, or errors stemming from code inside Firefox itself.
FireBug is just a few days old as its author have noted, but the current pre-pre-pre-alpha offer already a very convinient tool for debugging the different aspect of client side development
Subscribe to AJAX Magazine's feed