FireBug – The Best Firefox Plugin for Developers?

We have been doing quite a lot of Ajax-related work on our project recently. Writing rich-UI applications with a lot of client-side Javascript and Ajax-type functionality can be a chore, due to the lack of comprehensive debugging tools. However, there are some excellent Firefox plugins that make things easier, such as the Web Developer extension, TamperData (a more sophisticated version of the earlier Live HTTP Headers extension), and the sadly underdeveloped Venkman.

However, the newest and best extension is undoubtedly FireBug, which is like a one-stop shop for Web development tools. FireBug 0.4 has recently been released, and now has integrated JavaScript debugging support, which can be triggered by inserting a debugger; statement into your JavaScript code at the point where you wish to trigger a breakpoint. FireBug also has a very useful “Inspector” tool, which can be triggered by a CTRL-SHIFT-C keystroke, upon which any element can be selected, in order to display its source, DOM properties, and CSS styles.

Another useful feature is the console, which allows you to enter arbitrary JavaScript commands within the context of the current page, so if you are using Prototype, your $() etc. commands will work. One very useful feature in FireBug that I haven’t seen anywhere else is its support for Ajax request snooping. You can view each individual request (and response) within the FireBug UI. This extension has already been very useful, from debugging some awkward JavaScript, to debugging hard-to-find conflicts due to CSS precedence rules. I would recommend trying it.