Free at Last: Firebug 1.0 Beta

Joe Hewitt has released the first public beta of Firebug 1.0, the single most indispensable Firefox extension for web developers (yes, it’s even more useful than Web Developer—which I realize is a big call). What’s more, he’s keeping it free.

Firebug 1.0 Beta Screenshot

In defiance of realistic expectation, each version of Firebug has easily been twice as cool as the one that came before it, and this new release is no different. Here are my favorite enhancements:

  • You can undock Firebug into its own window—multi-monitor users rejoice!
  • The DOM inspector now offers full in-place editing of your document structure, not just attribute values.
  • The DOM inspector’s CSS tab reveals all applicable CSS rules for elements, including properties inherited from ancestor elements, and lets you toggle on/off and edit individual style declarations.
  • The DOM inspector’s Layout tab pops up guides, rulers, and shaded boxes in the main browser view to illustrate the CSS box model as it applies to each element that you hover your mouse over.
  • The Net tab graphs the request times for all files that make up a page, meaning I can just about throw away the Tamper Data extension, which I previously used for this.
  • The new JavaScript profiler reports on the execution times of your JavaScript functions, so you can pin down performance bottlenecks in serious JavaScript applications.

The most important aspect of this new release, however, is that it’s still free. Having dedicated a significant period of intensive development to Firebug, Hewitt was toying with the idea of making Firebug 1.0 a commercial product priced somewhere between $15 and $25.

With the release of 1.0 Beta, however, Hewitt has reaffirmed his commitment to keeping Firebug free for all, as it is such a vital contribution to the state of web development art. He does ask that you consider donating to the project if you find the product useful.

Now, I’d have happily paid $15 for a commercial version of Firebug if things had gone that way, but I’m so happy with the free and open source model Hewitt has settled on that I’ve already plunked down a $20 donation to the project.

Get Firebug. Fall in love with it. And when you do, think about donating too. I hear the next version will be twice as cool.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://infinity-stuff.com NickPresta

    I’m very happy with the decision to keep Firebug free. It is an amazing tool for Web Developers and is well worth a donation.

  • malikyte

    …now I can’t let myself upgrade until after the holiday season when I can easily afford $20. He definitely deserves it, as do most open source programmers that have well-known and appreciated applications. Thanks for the news, Kevin. I’m really looking forward to seeing that profiler in action!

  • http://www.hiphopsource.net shango5

    this is the first time I have used it since I am always using web developer. But I must say I am very impressed. I think I might have to make a switch.

  • http://www.errewf.it RaS!

    Good news!!

  • Kewl

    Donated for the previous version, will do the same for this one. Excellent job!

  • Anonymous

    getfirebug.com has been down for 2 days now
    i can’t get the update :’(

    Maybe he does need to start charging

  • http://www.sitepoint.com/ Kevin Yank

    Hmm the site is working for me now…

  • Andi

    It’s not a very good advert for the program when the developers OWN WEBSITE has messed up css! In IE, his logo is in the wrong place and obscures the first paragraph completely. I’ve changed my mind about getting this app.

  • Anonymous

    In IE, his logo is in the wrong place and obscures the first paragraph completely. I’ve changed my mind about getting this app.

    I don’t seem to experience the same problems when viewing the site in IE. I’m using version 7. Maybe that’s why?

    Come on Andi, get this extension. You won’t regret it. I certainly haven’t :)

  • Popcorn1010

    Ive been looking for a css builder for awhile now,
    but i have to look no further!
    -great product,thanks

  • http://www.sitepoint.com AlexW

    It’s not a css thing — it’s position is identical to FF. It’s IE6′s lack of PNG transparency support which explains the grey background.

  • W3 EDGE Custom Web Design

    Hey Kev, I’m glad that this plugin is getting more of the praise it deserves. I’m very glad you put it out there, now I can point the remaining reluctant few to this post and say “see!”. :)

    Joe, for us, you’ve changed the face of what we can get done directly in FireFox and it’s highly appreciated. You’ll have a donation from us soon if you didn’t get it already!

  • Rich57

    In SitePoint Design View #28, Alex Walker says “The CSS applied to that element is displayed in the right-hand panel.”
    How is the right-hand panel displayed?

  • http://www.sitepoint.com/ Kevin Yank

    The right-hand panel is always visible. You can see it in the screenshot above.

  • newdaynewdawn

    Wow! While I’m coming around the bend a little bit late on this one… man what an extension for the developer side of things.

    Wait… I’m on my way to purge a couple of extensions right now… you (bite your tongue) this could almost be more useful than the sacred web developer extension……. alright let’s call it a tie for now.

    Firebugs Away

  • willingButNotAble

    I really want to try this, but after installling the extension, my screen does not look like your screen shots. There is no right panel, the tabs are not in the same places as your screen shots and the layout view is text, not graphic. I’m using Firefox 1.5.0.9. Any clues?

  • newdaynewdawn

    willingButNotAble Says:
    I really want to try this, but after installling the extension, my screen does not look like your screen shots. There is no right panel, the tabs are not in the same places as your screen shots and the layout view is text, not graphic. I’m using Firefox 1.5.0.9. Any clues?

    Hmmm…. I didn’t have any issues…. just for tests sake I’d uninstall and reinstall it ?if? you haven’t already. Maybe some hidden incompatibility with 1.5. Worst case you might have to reinstall 1.5 over top of itself.

    That said, (not to force your hand) — why not head on up to version 2.0.0.1 or whatever the latest is. I to thought I’d stay on 1.5 for a while longer butttttttttttttt when it got down to it there were no extensions or anything else that provided a REALLY GOOD reason not to move to the next version (2.0). But of course do best suits your situation. I won’t guarantee success moving to 2…. but worth a shot if ya can.

  • Laura

    @ willingButNotAble

    Be sure to install the 1.0 Beta version from getfirebug.com.

    Mozilla’s Add-on site only features version 0.4 – completely different.

  • willingButNotAble

    I updated to Firefox 2.0 and all works fine! Thank you!