Whilst playing around with the latest development on the DragonFlyEye.Net site, I’ve rediscovered a plugin I installed a while back, FireBug. FireBug is a plugin for Firefox that. . . well, . . . it does so many things, its tough to put it in one sentence. Actually, they did a good job of it here:
Firebug – Web Development Evolved
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Even this is something of an understatement. I had been using FireBug as a way to see what errors were coming up in my JavaScript, but basically, that’s nothing more than a shortcut to the JavaScript Console. When I checked out the FireBug site again, I noticed that it said that it required the DOM Inspector component of Firefox to unleash it’s full potential. So, I uninstalled the old version and installed Firefox 2.0.0.1 (which also rocks, by the way). That’s when the real fun started.
Most of us who work with web development know that the biggest hassle, especially with JavaScript, is knowing exactly what’s been output and what’s been changed in the HTML when an application runs. Even if you right-click and “View Source,” you still end up with *none* of the changes added by the JavaScript.
But not with FireBug, baby! You can actually see the DOM as it happens at any specific moment, and watch the changes happen. Holy crap, is that ever helpful! No more guessing, no more hoping you’ve nested things exactly right. Now, you can see for sure. Best of all, they package it in the ever-helpful DOM format with plus sign navigation like you’re used to with Windows Explorer.
And how about those CSS woes associated with JavaScript? Is the DIV that I’m adding really going to inherit those properties, or is it inheriting those properties? Well, without FireBug, you just have to try it and see. *With* FireBug, whilst traversing the DOM, you can click on any section and get to see it’s associated styles. You see what style is being applied, what style is being inherited, and what the fully-computed style will be:
Firebug – Web Development Evolved » Blog Archive » Computed Style
I promised myself I wouldn’t add any more features to 1.0, but with the freshly posted Beta 9 I broke that promise to restore a feature from version 0.4 which many users have missed. The Style tab now allows you to show the computed style of an element instead of the list of cascaded CSS rules. To turn this on, look in the Options menu of the Style tab.
Yeah, baby, yeah! There are so many other features and doo-dads, it’s hard to list them all. Besides, I don’t work for the company, after all. I just ran across this because I’d run across a pod-cast about Ajax by some English dude who I think helped develop it. Cheers to you, dude, if you read this! For both the pod cast and the plugin.
Oh! One more thing I find super-bitchin’ about this plugin: it shows you the download times for every single component of your page. That’s an awesome tune-up feature and helps you make informed decisions about what code to keep and what code to lose or at least avoid loading when unnecessary. That’s led to a new revolution (I’m sure, entirely obvious to many) in the way that I’m approaching my JavaScript loading for the website.
Vive la revolucion!
Technorati Tags: Design, Tools, FireBug
powered by performancing firefox
