Firebug 1.7 New Features

Firebug 1.7 with full support for Firefox 4 is out of the door and I can’t miss this opportunity to describe some of the features introduced in this release.

For those who don’t follow Firebug blog and/or are not familiar with Firebug too much/not at all, let’s start with some links leading to sources where you can start to dig more about Firebug world:

DOM Storage

DOM Storage is becoming an important part of many web applications and so, we made sure the DOM panel can be easily use to explore content of any DOM Storage object (global, session, local).

You can also use the Console panel to log any of these objects. For instance, executing window.sessionStorage on the command line produces following output.

Of course, you can also log DOM storage object using standard console.log API (from within the page) and you’ll get just the same result.

Large Command Line History

As you might know there are two modes for Firebug Command Line. Single line mode is called Small Command Line and a multiline mode called Large Command Line. The news is that if you switch into the Large Command Line mode – you still have a history of previously executed commands available.

It’s disabled if the history is empty, otherwise you can click and see a popup with entries. Another news is depicted on the next screenshot. You can see the same popup even in the Small Command Line mode. Just click the button on the left side.

Date Object Logging

This is a small and pretty improvement of Firebug Console logging. If you log an instance of Date() object…

…you can see it’s actual value. I believe that all these small features keep Firebug the leader among in-browser dev tools.

Sort Computed Styles

List of Computed styles (available in Computed side-panel in the HTML panel) can be sorted alphabetically now.

Note that the default is sorting by category.

Break Notification messages

Break notification message UI is refactored and so, the notification message itself takes a lot less UI.

This helps the user to actually see the source code, which is no doubt the important thing when breaking into the debugger. As you can see on the screenshot (a little blurred but readable), the notification can be disabled. The UX should be intuitive and you should be able to quickly see where to enable again.

Better Representation of Attributes

The way how element attribute list is presented in the DOM panel has been improved (this has been my personal wish for long time). See the following screenshot.

All what you usually want to know about a list of element attributes are names and values. And that’s exactly what this change is about (you don’t want to know how hard it was the get this information before). Of course if you are interested in all the DOM properties of an individual attribute (it’s also a DOM node) you can just click on it and inspect further.

Firebug Start Button Redesign

One of the changes in Firefox 4 is no status bar. It’s actually replaced by an addon-bar, but… the trend is – not to have anything at the bottom of a browser window. Since Firebug’s entry point is there (the status bar icon) we were forced to create an alternative.

This button is appended into Firefox toolbar automatically just after installation. It has exactly the same functionality as the good old status bar icon. If you feel it’s a bit far from the Firebug UI, which is usually at the bottom, you can open the Addon-Bar and use the start button from there.

See more info about the start button.

Quickly Scroll to a Script Line

Our feeling was that most of the users don’t know about a feature that allows to jump to a specific line within the Script panel and so, we made it a bit more visible.

All you need to do to scroll to specific line is writing # + line number (you don’t need to press enter).

The Script panel content will automatically scroll as you typing the line number and highlight the line for you.

New Extension API

Firebug architecture has been well improved and there are two new extension points that are worth mentioning.



  1. Buzu

    Pretty good improvements. One thing I would like to see is a way to easily inspect the events assigned to an element. I know you can do that, but in my opinion it could be improved. Also, sometimes it won’t show events assigned to some elements.
    I like the way chrome does it.

    March 23rd, 2011 at 15:15
  2. Metasansana

    Awesome, this firebug has been saving me a lot of time I usually waste on debugging HTML layout.

    March 23rd, 2011 at 15:23
  3. Ken Saunders

    Great improvements for such an already awesome and priceless add-on.

    Well, I’m sure that someone could put a price on it, but I prefer it as it is.

    March 23rd, 2011 at 17:08
  4. Steven Roussey

    Nice writeup! I’ve forgotten what some of the improvements have been already!

    March 23rd, 2011 at 22:01
  5. Mats

    Any idea when to expect auto-complete in large command mode?

    March 23rd, 2011 at 23:10
  6. Honza

    @Mats: This enhancement is reported here: (for a long time). Since Firebug 1.8 release should happen in three months and we already have a lot on our TODO lists, my feeling is that this won’t be included. But also depends on contributors, if somebody volunteers, perhaps we could manage it…

    March 23rd, 2011 at 23:32
  7. Khaled Bin A Qadir

    I love Firebug :)
    New Firebug button for Firefox 4 looks awesome :)
    Changes are cool too !

    Huge thanks to Firebug team for this awesome upgrade.

    Web designer and developer from Dhaka

    March 24th, 2011 at 00:18
  8. Gaurav Mishra

    Cant wait to try it on – FF4

    March 24th, 2011 at 01:50
  9. Jethro Larson

    Looking good. Hope it’ll get easier to debug injected js, as that comes up a lot in dealing with 3rd party js. Haven’t played much with it yet but I’m digging what I’ve seen. Just hope it doesn’t leak memory like it did before.

    March 24th, 2011 at 18:21
  10. Jen Simmons

    OMG, I see that you changed the way hovers work (hovering over HTML in Firebug, hovering over CSS files names….). The change is *awful*. I can’t work nearly as fast, and now have to click three, four, five times when I used to just hover.

    I HATE it. :(

    And I LOVE Firebug. So I can’t use the new version. Can’t use Firefox 4 at all.

    I wish you would restore the old workflow regarding hovering. Or put it in as an option. Otherwise Firebug is now anywhere near as useful in getting CSS written quickly as it used to be.

    Meanwhile, thank you for building such a great tool we’ve all relied on for year.

    March 25th, 2011 at 05:31
  11. Honza

    @Jen Simmons: I don’t know what specific change you have in mind. But if you have any suggestions how to make it better, please create a new report here: and we can discuss it. That’s probably the best way how to make it happen.

    March 25th, 2011 at 06:07
  12. Larry Battle

    I hope you guys fixed the bug where Firefox crashes if you call console.profile too many times.
    Anyhow, can’t wait to try it!

    March 26th, 2011 at 03:52
  13. Honza

    @Larry Battle: I don’t know which specific bug you have in mind, but please try it and report a bug if it still doesn’t work.

    March 26th, 2011 at 03:59
  14. Emre YILMAZ

    Cool work… :) thank you firebug creators…

    April 3rd, 2011 at 14:22
  15. Web designer Bangladesh

    Thanks a lot for the firebug :)
    It saved my life!
    Long Live Firebug.

    July 14th, 2012 at 11:22
  16. Web designer Bangladesh

    I developed my portfolio Web Designer Bangladesh with the awesome help of Firebug!

    What a great Web development tool. Millions thanks to the developers of firebug.

    July 14th, 2012 at 11:26

Comments are closed for this article.