Mozilla

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.

Honza

16 comments

Comments are now closed.

  1. Buzu wrote on March 23rd, 2011 at 15:15:

    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.

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

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

  3. Ken Saunders wrote on March 23rd, 2011 at 17:08:

    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.

  4. Steven Roussey wrote on March 23rd, 2011 at 22:01:

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

  5. Mats wrote on March 23rd, 2011 at 23:10:

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

  6. Honza wrote on March 23rd, 2011 at 23:32:

    @Mats: This enhancement is reported here: http://code.google.com/p/fbug/issues/detail?id=55 (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…

  7. Khaled Bin A Qadir wrote on March 24th, 2011 at 00:18:

    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

  8. Gaurav Mishra wrote on March 24th, 2011 at 01:50:

    Cant wait to try it on – FF4

  9. Jethro Larson wrote on March 24th, 2011 at 18:21:

    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.

  10. Jen Simmons wrote on March 25th, 2011 at 05:31:

    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.

  11. Honza wrote on March 25th, 2011 at 06:07:

    @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: http://code.google.com/p/fbug/issues/list and we can discuss it. That’s probably the best way how to make it happen.

  12. Larry Battle wrote on March 26th, 2011 at 03:52:

    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!

  13. Honza wrote on March 26th, 2011 at 03:59:

    @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.

  14. Emre YILMAZ wrote on April 3rd, 2011 at 14:22:

    Cool work… :) thank you firebug creators…

  15. Web designer Bangladesh wrote on July 14th, 2012 at 11:22:

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

  16. Web designer Bangladesh wrote on July 14th, 2012 at 11:26:

    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.

Comments are closed for this article.