I’ve spent the last few days knee deep in various JavaScript projects and I’ve been using the heck out of the FireBug debugger for FireFox. I meant to mention this last month when i first downloaded it, but didn’t get around to it. FireBug has taken a nice step forward in this 1.0 version beta with many fixes and updates to the UI and a ton of new features.  

I’ve been using Firebug for some time, but only if I really had to. FireBug .42 or whatever it was before was decent but it had some odd behaviors like the source code in the debugger always being off by a line or two which was fairly annoying. The debugger often wouldn’t step with hotkeys and the UI was cumbersome to work with.

I’m happy to report that in version 1.0 beta that most of the odd behaviors have been fixed and the UI has been cleaned up a bit so it’s much more usable and many features have been added to make this a must have tool.

There are also a number of nice new features especially when you’re running AJAX applications – it includes an HTTP spy that lets you see the last request data. It captures the POST buffer, headers and the HTTP response so you can quickly see the data sent in callbacks.

It’s also nice that errors get flagged in the toolbar and let you jump directly the error in the error list and from there usually directly into the source code of the page.

I also like the way the DOM view which shows you everything defined on a page including global objects as well as all controls on the page. From here you can directly dig into anything and there’s also (a limited) search that lets you find anything that’s visible (ie. only non-expanded items). Unfortunately there’s no find next either but I’ve found it quite useful nevertheless

There are also some really nice CSS tools that let you view, edit and jump to areas in the DOM and the CSS style sheet. You can hover over any element and let the HTML view take you directly to the code in the source view. You can modify the text and see the changes immediately. Both HTML and CSS can be changed in this way. This is an amazing time saver when you’re screwing with some complex CSS and you just can’t get it right – it sure beats running the page for each change. There are several other tools that let you see the box model hierarchy and adjust borders and margins which overlays a ruler and lets you visually adjust various border/margin attributes. It’s very slick although I’m not sure how much use I’ll get out of that but I’m sure the granola crunching designers will though <g>…

All in all this tool rocks even with a few rough edges. I’ve been using Visual Studio’s JavaScript debugging most of the time, but with Firebug in this state I’ve been able to move most of my debugging – except for IE specific issues which are unfortunately quite common – into Firebug.

Highly recommended.