timlog

You have used firebug. I’ve been an avid firebug user the minute I first heard about it — starting with the initial appeal of CSS inspection, then integrated error reporting, and then getting hooked on the interactive javascript console. Firebug .3 was a big step up from the built in DOM inspector, but still it had its problems with generated content, a quirky debugger, and the inability to see inherited styles.

Then firebug 1.0 came along obliterating these problems and brought a ton (no a metric *#$! ton) of great new functionality. Its sad enough that I’m extolling a piece of software publicly… its even sadder that I was jumping up and down (literally) in my apartment when I first tried out firebug 1.0 beta. Yeesh…

But I do have a good excuse. I do a lot of web development, I practically live and breathe it (though I have not been doing it much on the side lately). If a tool came along that made you twice as productive for your job/hobby, you’d be happy too — right?! And it is not just about productivity, its also about joy of use. I used to dread debugging nasty CSS issues. It sometimes took hours to figure out that that 3px gap was caused by a measly missing space between two selectors. Now I feel like I’m in control and am confident that bug will be easy to find (and fix)! So please, before you label me as too big of a dork remember that you’d be pretty happy too to find something that made your life so much easier :).

So for the doubtful, what can firebug do?

• Click to inspect any part of the page to see its styles (and all the styles that have been inherited and/or overwritten), box model, dom properties, or html source
• Dynamic editing of the page. HTML, CSS, and javascript. Just click to edit a field. The page will update to your changes in real time. As a bonus the edit fields have auto-complete (just like every other place you can type)
• Solid javascript debugging with really quick and easy watch expressions. I knew that I should have been debugging instead of logging messages for a long time, but now I can finally use a debugger that isn’t painful (sorry Venkman… and firebug .3).
• Profiling!!
• Graphic visualization of all the http requests made on a page, including everything you need to know for page optimization!!!
• Easily navigate between contexts since nearly everything in firebug is a link. Want to look into the properties of a javascript object? Click it. Want to see the http headers of a request? Click it. Want to inspect an element in the source view? Click it. This UI paradigm easily leads to feature discovery since you’ll always try to click on something to find out more about it — and you will quickly realize that it just feels right.
• And many things are easily discoverable without a click. Just hover over any image string and a popup will appear. Same with variables while debugging and with hex colors (no more memorizing hex codes)!

And after watching a video of Joe Hewitt demoing his creation, I still learned more features:

• When editing a numeric field such as padding just press up or down with the arrow keys to change the padding amount, slick!
• Extremely simple conditional breakpoints. I used to think that you couldn’t do that in firebug, but all you have to do is right click a breakpoint and type in an arbitrary javascript expression.
• Automatic bookmarklet “scrunching” when copying from the multi-line console
• Keyboard shortcuts.. I can’t live without ctrl-shift-t and ctrl-shift-r in eclipse, and now I know I can do ctrl-shift-space in firebug. Oh and I finally found out that I can get rid of the Wed Developer Extension’s shift-ctrl-c shortcut so I can use it for firebug :)

If you still are not satiated, watch this screen cast.

Go and try it, and if you love it please donate to the guy. He deserves it.
I’m very surprised Joe hasn’t been picked up by one of the big web companies yet… He single-handedly has saved them potentially millions of dollars in man-hours. Maybe he has just turned them all down :)

Share This