Firebug 1.0 - Web developer tool of the year?

I have previously mentioned Joe Hewitt’s Firebug extension for Firefox. It used to be a really useful development tool, well worth installing alongside your other extensions that make Web development easier. But what Firebug used to be is nothing compared to what it is now.

With the recent release of Firebug 1.0 (beta - the old kind of beta, not a Web 2.0 eternal beta), this extension went from “great” to absolutely marvellous. A must have that no Web developer should do without. I’m serious - you need Firebug.

I love the new style inspector. I’ve been using the WebKit nightly builds for the Web Inspector tool that comes with it, but it honestly pales in comparison to what Firebug offers.

Firebug 1.0 lets you view and edit the HTML and CSS of any page. It tells you exactly which CSS rules affect the styling of the element you select in the style inspector - not only which rules affect it directly but also which rules it inherits properties from. It lets you edit anything and toggle CSS declarations on and off, with the results immediately showing on the page.

Firebug also has a layout inspector that displays a nice graphic of the currently selected element’s box model properties, and a DOM inspector that lists all DOM properties and their values. Then there’s the JavaScript debugger and the Net inspector. All of these goodies are no longer constrained to part of the main browser window, which they were in the previous version. If you want to you can now open Firebug in a separate window.

There is much more than that to this fantastic extension, so I could go on and on raving about it. I won’t though - now it’s time for you to download Firebug and see for yourself.

Posted on December 7, 2006 in Browsers, Quicklinks, Web General

Comments

  1. I’ll second Roger’s opinion here; Firebug 1.0 is a great extension that no web developer should be without.

  2. Consider that opinion thirded. I too was so impressed I went and wrote a blog post about it. Seriously good extension.

  3. Holy, holy moly. This extension is awesome. Firebug was great, but this new version just completely obliterated half of the programs I use to develop websites.

    Fantastic!

  4. Yep. Been using this extension for a bit now and am in love. Makes life easier.

    Reminds me a bit of XyleScope, but it’s not an external app.

  5. I don’t want to sound repetitive of others, but I agree that this extension is incredible. It is extremely helpful in getting to the core of your system (html/css/js).

    I like this better than the web developer extension, and I think that is a great extension as well.

  6. I completely agreee. The HTML/CSS Edit and the style inspectors are great. I used to take FireBug for JavaScript/AJAX Development mostly and for this it has always been very handy, but now the new html/css features are even superior to the ones of the web weveloper toolbar. So I guess this extension will become my Swiss Army Knife for development… A big thumbs up!

  7. December 7, 2006 by Theo Skye

    In answer to the post’s title question: Yes! Amazing extension. If anyone who has Firebug 1.0 installed hasn’t found the “Inspect” button, go do that now. :) Click it, then mouseover any element on a web page that you want to inspect and click the element to “lock” the inspector. Then, in the right-hand pane, of Firebug, make sure the “Style” tab is selected. This pane will show you every CSS selector that has any influence on that element and what file/line the selector is defined on. And if any properties in any of the selectors are overridden by other selectors, they appear crossed out. Amazing. Amazing. Amazing. This is definitely going to make my workday better. Plus it will be a really effective teaching tool for those trying to learn and master CSS. Off to donate now!

  8. I’d also like to say, if people haven’t already and they can afford to do so, to donate a little money Joe’s way. This is by far one of the best tools I’ve ever used. When 1.0 hits release, it should be renamed “Firebug Day” and celebrated as an international holiday.

    Oh wait, did I just go too far with my fanfare? :)

  9. Truly the best tool for web dev out there. Also, be sure to check out Firebug Lite. A small Javascript that emulates the Firebug console in other browsers, including the notoriously hard to debug Internet Explorer.

  10. December 7, 2006 by Dallas

    A really great tool I can’t live without now is httpwatch. Currently it only works in IE. I think they are working on firefox version but it lets you see every request your browser makes (like AJAX requests for example) and what the http headers, status codes return, time to download and content of the request. Also lets you filter out things like js files css and images if you only want to see dynamic requests.

  11. I just stumbled across this plugin this week and I absolutely love it. Definitely a must have.

  12. And if any properties in any of the selectors are overridden by other selectors, they appear crossed out.

    This is my favorite thing so far. As a mid-level-skill developer, this is going to be so valuable in figuring out where two elements are contradicting each other.

  13. That should have read “As I am a mid-level-skill developer…”

  14. I’ll echo what everyone else has said so far but I’ve found one slight problem with it in that if the stylesheet is called with @import, it doesn’t show up in the Stylesheet tab - only stylesheets called with do so.

  15. That should read “only stylesheets called with <link… do so”.

  16. Been using Firebug ever since the 0.4 was out and I really really liked it. Now with the 1.0 beta one could literally see my mouth fall open: very impressed I was (and still am).

    Especially the fact that you can now detach the firebug panel and that we at work all have dual screen setups makes me even more happy: view site on the primary screen whilst debugging those lines of javascript on the secondary screen.

    One happy customer.

  17. December 8, 2006 by Jessica

    This is certainly a great extension that I found only in the last week or so. The inspect/style combo is such a huge help for me as I try to figure out the intricacies of CSS. My only wish, in terms of using it as a learning tool, would be to show all levels of inheritance, if that’s at all possible. In my current work I’m finding that compounding margins (particularly when a negative one overrides a positive one) is something I need to be aware of outside of the listed inheritance, perhaps I could be coding better but for now every little step forward makes me better and this tool is a huge help.

  18. “It lets edit anything and toggle CSS declarations on and off, with the results immediately showing on the page.”

    Are you missing a “you” in there somewhere?

    That aside, I agree, firebug 0.4 was totally sweet and 1.0 looks to be downright incredible.

  19. OMG!!!!!!!!! I love Firebug! I am so happy to have tool that I can use my mouse to locate elements in my code. This thing is a total must have. Can you have it on the side rather than the bottom?

  20. @Justin - click the little red arrow in the top right corner next to the search field and it’ll pop up in a separate window and then you can size it how you like.

  21. I use Opera, so I tried installing FireBug Lite as a UserJS file, but that simply didn’t work — ctrl+shift+L or F12 (which also brings up the quick preferences context menu) did nothing to trigger FireBug, and no errors existed in the error console. Oh well.

    I tried playing around with it in Firefox, and I agree that it’s much improved from 0.4. It’s a lot prettier and most of the existing functions were improved significantly.

  22. Holy shit (can I say that?)… I love it. Thanks Roger.

  23. December 8, 2006 by Anders

    Can’t edit the css. Get the following error: “Unable to show styles. You must install DOM Inspector.”

    Can’t seem to find the dom inspector for firefox 1.5.0.8. Am i missing something?

  24. December 8, 2006 by Jens Hellqvist

    Good golly miss Molly. I have been using web developer toolbar for a long time now, and that’s a good one. Firebug, though, stopped the clocks over here. Brilliant. Amazing. Thanks for pointing it out.

  25. Anders: reinstall Firefox, tick ‘Custom Install’ and select the ‘Developer Tools’ pack.

    Firebug 1.0 is amazing, but can anyone help me find out how to see the computed style of an element? I can do it in DOMi and Firebug advertises it, but I’m yet to work out how.

  26. A thing of beauty indeed.

    It is like a chocolate box of goodness. Just when you think it can’t get any better there is something else to amaze and delight.

    Hats off to Joe - this is seriously good work and deserves a donation.

  27. For the countless developers whose life has just become a lot easier, you can actually donate to the project, to make sure that firebug does not just suddenly die.

    Time to put your $10 where your mouth is :-)

    I did, within 5mins of downloading the 1.0 beta, and feel good about it :)

  28. For the countless developers whose life has just become a lot easier, you can actually donate to the project, to make sure that firebug does not just suddenly die.

    Time to put your $10 where your mouth is :-)

    I did, within 5mins of downloading the 1.0 beta, and feel good about it :)

  29. Looks really useful - will be giving it a try alongside my existing setup (Web Dev Toolbar, Stylish, Greasemonkey - the latter 2 are great for quick fire adjustments when in meetings…)

  30. Wow. That Layout tab is the answer to my prayers.

  31. I just wish it had a tab where changes made are showed, or simply a ‘highlighter’ for the properties and lines edited.

    Truly the best extension for developers.

  32. I just donated 10USD. Just imagine what Firebug 2.0 will be like, if Joe gets hundreds of dollars (or more?) for what he’s already done.

    It even works for my XHTML 1.1 pages. Many similar extensions don’t.

  33. December 9, 2006 by Martin

    Thanks for letting us know Roger, the latest version of Firebug is a goldmine!

  34. December 10, 2006 by Masklinn

    Dallas wrote

    A really great tool I can’t live without now is httpwatch. Currently it only works in IE. I think they are working on firefox version but it lets you see every request your browser makes (like AJAX requests for example) and what the http headers, status codes return, time to download and content of the request. Also lets you filter out things like js files css and images if you only want to see dynamic requests.

    Firebug 0.4 already did part of it, Firebug 1.0 does all of that, and includes a network profiler and a Javascript profiler on top of it.

    You should check it out (Console and Net tabs are what you’re interested in for these features).

    Firebug’s still completely free by the way.

    Anders wrote

    Can’t seem to find the dom inspector for firefox 1.5.0.8. Am i missing something?

    If you’re running Windows, reinstall Firefox and don’t forget to check the “Install DOM Inspector” tickbox. If you’re running OSX, DOMI should be in the base package. It’s a Mozilla extension that’s bundled with Firefox.

    About Firebug itself, this 1.0 is a godsend.

    Remember that Joe Hewitt’s still updating it though, so check the Get Firebug site from time to time to check if he’s released a new update to the beta (or put the Firebug blog in your feed reader)

  35. Another tool I’ve recently stumbled across is a development environment called Aptana. It’s kinda like Dreamweaver without the WYSWYG. Features code complete, and a huge array of stunning Javascript tools, including a Firefox plugin for debugging. Best of all - it’s open source.

    I just wish I’d found this two weeks earlier, before I bought a license of DW8.

    Nick

  36. A bit off topic, but… another good program that you can use to keep an eye on your http traffic is Fiddler (http://www.fiddlertool.com/). It acts as a proxy server so you can set your proxies in FireFox or IE (or any other program that uses proxies) and use this program to see all incoming and outgoing http traffic.

  37. The software is a marvel. I wrote the head of the panel for the Orielly/Google Open Source awards. If you think he’s worthy of a nomination, let’s flood them!

    Also, please give the dude 10 bucks.

  38. Looks really great, only I can’t get it to work. I’m on mac OSX, installed 1.0 over a previous version and I only see a grey circle with a stroke in the middle, where the green circle should be ….

  39. tools > firebug > enable firebug duh:)

  40. December 19, 2006 by Joshue O Connor

    The Firebug extension looks really promising, well done! I especially like the ability to view the DOM tree. Its a welcome addition to the Firefox browser.

    Many thanks.

    Josh

  41. Very promising extension, indeed!

    Now diving into it… thx, Roger! :)

  42. After just a couple of weeks using the 1.0b version I just can’t imagine myself living without it. This is the very best extension of the year.

  43. this is probably the best Firefox extension of all ever.

  44. How did we do things in the past? How? I’m dead serious, nothing else like it can even look at firebug let alone attempt to touch it with a long pole. This is the best thing to hit the industry since… ummmm… who am I kidding…. Its a new era. Its the beginning of the real web development as we know it. The second half of the puzzle we never truly had but always knew we wanted. Before firebug we were just a bunch of apes banging things into place until they did what we said. Its so good now with 1.0 I feel like printing some screenshots out and rubbing them against my skin.

  45. Maybe kind of late for this party - but this firebug tool is so very cool, it’s never too late to mention. Examining my competitors sites now for hours :-)

  46. July 11, 2007 by emil

    more likely the developer tool of the millennium, lol :D

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.