Firebug 1.10 has been released and so, let’s see what new features are introduced in this version.

spacer

First of all, check out the compatibility table:

  • Firefox 5.0 – 13.0 with Firebug 1.9
  • Firefox 13.0 – 16.0 with Firebug 1.10

Firebug 1.10 is true community achievement and so, let me also introduce all developers who contributed to Firebug 1.10

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Harutyun Amirjanyan
  • Steven Roussey
  • Joe Walker
  • Stampolidis Anastasios
  • Heather Arthur
  • Farshid Beheshti
  • Leon Sorokin
  • Florent Fayolle
  • Vladimir Zhuravlev
  • Hector Zhao
  • Bharath Thiruveedula
  • Nathan Mische

New Features

  • Bootstrapped Installation
  • Delayed Load
  • Cookie Management
  • Command Editor Syntax Highlighting
  • Autocompletion
  • Trace Styles
  • New Command: help
  • Link to Web-font Declaration
  • Support For Media Queries
  • Displayed Entities Format
  • Displayed Color Format
  • Tooltips for Menu Items
  • Support for “focus” CSS pseudo class
  • HTTP Requests From BFCache
  • Delete CSS Rule

Bootstrapped Installation

Firebug installation doesn’t require browser restart. Install, press F12 and Firebug is immediately ready at your fingertips.

If you are updating the previous 1.9 version that require restart you need to restart the browser.

Delayed Load

Firebug doesn’t slow down Firefox start-up time anymore! It’s loaded as soon as the user actually needs it for the first time. Only the Firebug start-button and menu is loaded at the start up time.

Cookie Management

Firebug allows to view and manage cookies in your browser. You can deny cookies for specific sites, filter cookies, create new and delete existing cookies. You can also break into the debugger when specific cookie changes its value and see the line of script that caused the change. And much more! Check out full list of cookie related features.

spacer

Command Editor Syntax Highlighting

Command editor (aka multiline command line) supports syntax highlighting.

spacer

Autocompletion

Autocompletion in Firebug has never been better. This feature helps you when editing CSS properties, variables in the Watch panel, break-point conditions, any numbers, colors, font-families, etc. Just try to edit your page through Firebug UI and you’ll see for yourself.

spacer

Check out the screenshot. When typing into the Watch panel, the autocompletion offers variables in the current scope.

Trace Styles

This feature allows tracing all places which affected specific CSS property. The feature is part of the Computed side panel where every CSS property is expandable. The Computed side panel also supports tooltips for colors, images and fonts.

spacer

See, there are three places trying to set the font-size of the selected element (the one in black succeeded). Of course, the blue text/location on the right is click-able and navigates the user the right place. See also detailed explanation.

New Command: help

If you are interested what built-in commands are actually available in the Command Line (within the Console panel) just type: help. You’ll see a list of commands with a description.

spacer

The green command name is a link navigating the user to Firebug wiki with more info (and how-to-examples) about clicked command.

Link to Web-font Declaration

This feature allows to quickly inspect custom font-family declarations. All you need to do is to right-click on your font-family value, pick Inspect Declaration and you’ll be automatically navigated to the CSS panel that shows the place where the font-family is declared. Check out the screenshot below.

spacer

Support For Media Queries

Media queries of @import CSS rules are displayed inside the CSS panel and it’s possible to edit them. Of course, auto-completion works in this case too (e.g. when I did the screenshot, I clicked on 400px value and pressed up-arrow, that’s why there is 401px).

spacer

Displayed Entities Format

There are new options in the HTML panel that allow changing displayed format of HTML entities.

spacer

And by the way, MathML entities are also supported.

Displayed Color Format

There are also new options allowing to change displayed format of CSS colors. Firebug offers three options: Hex, RGB and HSL. These options are available in CSS, Style and Computed panels.

spacer

Tooltips for Menu Items

This is one of many little and neat improvements. Every menu item has also a tooltip that explains the associated action. It’s especially useful for options.

spacer

Support for “focus” CSS pseudo class

Apart from hover and active CSS pseudo classes, Firebug is also supporting: focus.

This feature helps in situations where you want to inspect CSS rules that applies only if the inspected element has focus. Here is what you need to do.

  1. Use Firebug Inspector to select your element
  2. Open the option menu for the Style side panel (click the black triangle next to the panel label)
  3. Check :focus option
  4. Now Firebug simulates the focus state and so, every CSS rule using :focus pseudo class in the selector will be displayed

spacer

HTTP Requests From BFCache

Firebug Net panel is able to display also HTTP requests coming from so called BFCache (Back-Forward Cache). This cache makes backward and forward navigation between visited pages very fast. Note that this has nothing to do with the browser cache.

spacer

Check out the screenshot, we changed the background for requests coming from the BFCache and so they can be easily differentiated from other requests. Only the last request on the screenshot is coming from the server.

In order to see those requests you need to check Show BFCache Responses option.

Delete CSS Rule

Another neat feature that allows to delete whole CSS rule together with all its properties. Just right click a CSS rule…

spacer

 

Check out our issue tracker for all 79 enhancements in Firebug 1.10.

Also, follow us on Twitter to be updated about upcoming Firebug news!

Jan ‘Honza’ Odvarko

36 comments

Post a comment

  1. spacer Benjamin wrote on July 13th, 2012 at 7:55 am:

    Great Job !

    Reply

  2. spacer Brian wrote on July 13th, 2012 at 8:53 am:

    So Excited,

    Thanks Guys!

    Reply

  3. spacer ismaail wrote on July 13th, 2012 at 1:44 pm:

    thanks a lot

    Reply

  4. spacer Spencer wrote on July 13th, 2012 at 2:23 pm:

    Dude… you’re Batman…

    Reply

  5. spacer Jesse wrote on July 13th, 2012 at 4:03 pm:

    +1 million for the Trace Styles feature! Been hoping for that for a long time! Great job on all of these actually. Thank you!

    Reply

  6. spacer jlapitan wrote on July 13th, 2012 at 4:07 pm:

    wooohoo! love the new features..

    Reply

  7. spacer Joshua wrote on July 14th, 2012 at 2:32 am:

    Great new features!

    Thank you!

    Reply

  8. spacer Byzod wrote on July 14th, 2012 at 3:50 am:

    We need auto completion for multiline editor…

    Reply

    1. spacer Sebastian Z. wrote on July 17th, 2012 at 12:31 am:

      Auto-completion for the Command Editor is already planned.

      Sebastian

      Reply

    2. spacer asdfasdf wrote on July 19th, 2012 at 4:08 pm:

      In the meantime, this one is pretty good: https://addons.mozilla.org/en-US/firefox/addon/firebug-autocompleter

      Reply

  9. spacer Moss wrote on July 14th, 2012 at 4:42 am:

    Great new features!

    Reply

  10. spacer Mahendra wrote on July 14th, 2012 at 5:01 am:

    Wonderful work
    Thanks for all.

    Reply

  11. spacer Sebastian wrote on July 14th, 2012 at 8:06 am:

    Great job!
    A must have tool these days.

    Thank you all.

    Reply

  12. spacer Webdoc wrote on July 14th, 2012 at 9:25 am:

    Firebug is the best thing to ever happen to web design. Thanks for all your hard work.

    Reply

  13. spacer Jeff wrote on July 14th, 2012 at 11:57 am:

    !! LIKE !!

    Reply

  14. spacer Jakub Vrána wrote on July 14th, 2012 at 12:16 pm:

    Thanks for a big update.

    Why the syntax highlighting is not used also in the Scripts panel? I’ve used FireRainbow but it causes crashes so I had to disable it.

    Reply

    1. spacer Jan Odvarko wrote on July 14th, 2012 at 11:52 pm:

      Syntax highlighting for the Script panel is planned.

      Reply

  15. spacer Vincent F. wrote on July 14th, 2012 at 1:55 pm:

    Thanks Guy for hard working !
    Keep up the works. Firebug is a must !

    Reply

  16. spacer Mike wrote on July 14th, 2012 at 2:28 pm:

    So awesome – been waiting for this update for a long time!

    Reply

  17. spacer Stuart Guthrie wrote on July 14th, 2012 at 5:35 pm:

    Well done firebug team. It’s an awesome app and very useful. If you get to Linux.conf.au, look out for me, I’ll shout the pizzas or beer!

    Reply

  18. spacer ken wrote on July 14th, 2012 at 7:15 pm:

    Thanks for the effort. It is stellar. Is there any way to open Firebug, by default without delay? This new feature is slowing down my develop / test cycle.

    Reply

    1. spacer Jan Odvarko wrote on July 16th, 2012 at 1:19 am:

      Set the following pref to false: extensions.firebug.delayLoad
      (in about:config)

      Honza

      Reply

  19. spacer Adrian wrote on July 15th, 2012 at 11:49 pm:

    Firebug 1.10 keeps up the great work on this fantastic product

    Reply

  20. spacer pd wrote on July 16th, 2012 at 2:09 am:

    Absolutely outstanding job, especially considering Mozill’a morose decision to re-write the wheel. Or shall we say Macify the wheel just for the sake of it? Imagine what could be achieved if Mozilla had sensible leadership! I guess there is some cross pollination such as the new shared JS debugger and inspector engine (AFAIK?) but really, Firebug is so good, there’s no need for the ‘native’ devtools, especially since the Hueyfix is such an enormous bonus to Firebug performance.

    Let’s just bundle Firebug with Firefox by default and stop splintering resources into two different developer tools teams. It’s ridiculous!

    Reply

  21. spacer spsoft wrote on July 16th, 2012 at 7:38 am:

    I’ve found Firebug1.10 a serious bug,when the editgird page in br,after you edit the gridPage ,then refresh the br page and continue editing the girdPage,and page of new effects,but Firebug1.10 to see the effects have not been changed

    example code: page is seen in 153,191,but with Firebug1.10 to see is 153.19，but I use Firebug1.9.2 without any problems. why?

    Reply

    1. spacer Jan Odvarko wrote on July 16th, 2012 at 8:04 am:

      Please, create an issue report here: code.google.com/p/fbug/issues/list so, it isn’t lost here among comments.

      Thanks!
      Honza

      Reply

  22. spacer John Doe