FireBug
I use Safari as my day-today browser. It’s fast, clean, and has gorgeous text rendering. But it doesn’t run on Windows. Most of the people who use the applications I build do use Windows. Luckily, for a lot of those applications, I can specify Firefox as the browser of choice, side-stepping the entire IE morass.
My applications are developed using Camino. It’s fast, clean, and has very nice text rendering. For the most part, everything works quite nicely. It when things stop working that everything falls apart. Camino doesn’t have a JavaScript Console. So when my JavaScript fails, it does so with nary a bang nor a whimper.
Enter Firefox. Firefox is fast, clunky, and has okay text rendering. Actually, Firefox has perfectly fine text rendering, but its buttons and menus and general interface are so completely out of place on the Mac that they drag everything else down with them. (Firefox on Windows uses native buttons and menus, Firefox for Mac is uglier than Firefox for Windows.) Which is why I use Camino. The fact that Camino has actual Mac buttons instead of Windows 95-ish things offsets its lack of a JavaScript Console. Still, when things go bad, I brave the ugly and rejoice in the JavaScript Console and Web Developer extension.
And then I get frustrated because I’m bouncing between three browsers with four windows between them. And Firefox always seems to have the exact wrong window forward every time I switch to it. Yes, I have a small screen at the moment, but this will still be just as frustrating once I’ve upgraded to a 20″ iMac with a second display.
Or, to be correct, I should say that all of that was a problem. I’m still bouncing between three browsers, but they each have precisely one window and that window always shows me exactly what I want to see. (Excluding the times I hit ⌘-tab too many times and end up in Mail or something…)
The reason for this wonderous change is FireBug (http://www.joehewitt.com/software/firebug/), a plucky little Firefox plug-in that everyone should have. Simply put, FireBug takes over a small part of the bottom of your browser window to show JavaScript Console messages, DOM Element details, XMLHTTPRequests, and pretty much everything you’d want to be able to see in a little frame at the bottom of your window.
Yes, I did in fact say XMLHTTPRequests. With the checking of a single box, every AJAX request the page sends out is logged and the XHR object, parameters and response are all laid out for your inspection.
The sheer utility of FireBug is equalled only by my joy in using it. I am tempted to go write some buggy JavaScript just so that I can enjoy debugging it with my new tool. It’s that much of an improvement.
Loading a page and watching the AJAX requests roll by, with their little JSON bundles of data is currently a joyous experience. I’m sure the shine will wear off eventually and FireBug will become just another tool. But the fact that I’ll never again have to open a second window to discover that I forgot to qualify the completion handler with the object’s variable name will stick with me for a long time to come.
FireBug integrates the DOM Inspector and JavaScript Console into the Window (filtering out JavaScript messages from other windows and tabs), and then goes even further opening up whole new vistas of debugging possibilities. Plus, it’s the prettiest part of the Firefox window.
Highly Recommended.
ajax, javascript, camino, firefox, firebug, web developer extension
AHHH! You get me all excited about this, and then no links! now I have to go to google! >:(
Sorry, there was a link in there, but I guess it was over-lookable. I’ll turn the ‘obviousness’ knob up a few notches.
Camino indeed outputs the JS debugger directly to your console log which can be reviewed by Console.app (check out cool “bring to front/send back” preference in Console)