« Back to Fireday

FireBug

December 8th, 2006 at 4:00am — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox pointLink

With the first release of Firebug, I was impressed with the extension overall. I even wrote about how the "Super Extension" could be a standalone application in itself. Based on what I've seen since its 1.0 release on Monday, I'm impressed even more so than I was before with the previous version.

First and foremost, everything that was included with Firebug, you would expect to pay for in a commercial IDE. The very thought of releasing this extension for free blew my mind. Yes, I said the extension is FREE. If you are using it constantly (which I am), you can donate some cash to Mr. Hewitt for all of his hard work. I pitched in my contribution. :-)

Let's get to the extension. One of the things that I love is the ability to have dual monitors while programming. The one problem I had with Firebug was the panel was always at the bottom. With version 1.0, you can run Firebug in a bottom panel OR run Firebug in a completely separate window. Move the other window over to the opposite monitor and start debugging. Awesome!

HTML & CSS Tools

Firebug provides a Box Model viewer, along with an improved inspector. Click on the HTML tab in the left panel and the Layout tab in the right panel. The Box Model is displayed on the right while the HTML tree is displayed on the left. Start moving through the tree and as you hover over an HTML item, you'll notice the HTML in the browser window will be highlighted. Click on some text in the HTML tree. You can edit the HTML right there in Firebug.

I've always loved CSS, even back in Netscape days (when it was supported). However, I always wanted to know about the size of a DIV. In the Layout tab, when you hover over the Box Model, you'll notice it'll draw a ruler around the box for those who are having problems with dimensions of the box.

You can even edit the CSS. Firebug provides you the ability to tweak your CSS while looking at the browser, so immediate adjustments can occur while editing the CSS. Excellent feature.

Why are my pages taking so long to load?

Firebug provides a network monitor to see if your pages are taking way too long to load. After reading some recent statistics about web sites, I think this feature will definitely come in handy. To activate this feature, make sure Firebug is open and you have the Net tab selected in the left panel. You won't see much right now. Reload the page and just watch your statistics light up the screen. Wow! VERY cool.

Want more information on what came down from the server? Expand the page by clicking the plus (+) and you see the headers of each item that was received. Nothing like digging into Firefox and finding out the dirty details, huh?

We can't forget AJAX

No, we can't. Firebug still delivers when it comes to everyone's favorite: AJAX. They have vastly improved the AJAX monitor in this version. Click on the tab XHR (XmlHttpRequest), and load a page that contains AJAX. Activate it and watch as the activity is displayed in Firebug.

Speaking of JavaScript, you'll never guess what Firebug included in this version. A command-line for JavaScript. You can type in JavaScript code and have it display the results immediately. Flashback to dBASE III+, but I digress. Not only do you get a command line for JavaScript, but you also get auto complete when you type at the command line. Whoa!

If you've run into JavaScript errors before (and who hasn't), you know the Firefox debugging console isn't what its cracked up to be. Firebug has an entire section dedicated to profiling, logging, editing, stack tracing, nested groupings, and assertions (oh my).

You'll have to believe me when I say I haven't even scratched the surface of everything that's included in this extension. If I could give this extension a rating of 6, I would, but Firebug receives my highest rating for a good reason. I've been using the extension for a week and I've not run into one problem so far and its been a godsend and solid performer since I've started using version 1.0. As an extension...nay, an application, Firebug has shown me a great deal of programming expertise and knowledge of just how powerful Firefox's extension architecture really is.

For those who work in a corporate environment and use Firefox along with IE for web development and new employees are hired, the ONLY two extensions that should be a requirement for designers and developers would be the Web Developers Toolbar and the awesome Firebug extension.

And I'd be content with that. :-)