Firebug 1.10 New Features

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


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.

Command Editor Syntax Highlighting

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


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.

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.

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.

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.

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

Displayed Entities Format

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

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.

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.

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

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.

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…


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


  1. Benjamin

    Great Job !

    July 13th, 2012 at 07:55
  2. Brian

    So Excited,

    Thanks Guys!

    July 13th, 2012 at 08:53
  3. ismaail

    thanks a lot

    July 13th, 2012 at 13:44
  4. Spencer

    Dude… you’re Batman…

    July 13th, 2012 at 14:23
  5. Jesse

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

    July 13th, 2012 at 16:03
  6. jlapitan

    wooohoo! love the new features..

    July 13th, 2012 at 16:07
  7. Joshua

    Great new features!

    Thank you!

    July 14th, 2012 at 02:32
  8. Byzod

    We need auto completion for multiline editor…

    July 14th, 2012 at 03:50
    1. Sebastian Z.

      Auto-completion for the Command Editor is already planned.


      July 17th, 2012 at 00:31
    2. asdfasdf

      In the meantime, this one is pretty good:

      July 19th, 2012 at 16:08
  9. Moss

    Great new features!

    July 14th, 2012 at 04:42
  10. Mahendra

    Wonderful work
    Thanks for all.

    July 14th, 2012 at 05:01
  11. Sebastian

    Great job!
    A must have tool these days.

    Thank you all.

    July 14th, 2012 at 08:06
  12. Webdoc

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

    July 14th, 2012 at 09:25
  13. Jeff

    !! LIKE !!

    July 14th, 2012 at 11:57
  14. Jakub Vrána

    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.

    July 14th, 2012 at 12:16
    1. Jan Odvarko

      Syntax highlighting for the Script panel is planned.

      July 14th, 2012 at 23:52
  15. Vincent F.

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

    July 14th, 2012 at 13:55
  16. Mike

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

    July 14th, 2012 at 14:28
  17. Stuart Guthrie

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

    July 14th, 2012 at 17:35
  18. ken

    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.

    July 14th, 2012 at 19:15
    1. Jan Odvarko

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


      July 16th, 2012 at 01:19
      1. Ken

        Thank you. That works and is a good development setting.

        July 24th, 2012 at 07:09
  19. Adrian

    Firebug 1.10 keeps up the great work on this fantastic product

    July 15th, 2012 at 23:49
  20. pd

    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!

    July 16th, 2012 at 02:09
  21. spsoft

    I’ve found Firebug1.10 a serious bug,when the editgird page in IFRAME,after you edit the gridPage ,then refresh the iframe 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?

    July 16th, 2012 at 07:38
    1. Jan Odvarko

      Please, create an issue report here: so, it isn’t lost here among comments.


      July 16th, 2012 at 08:04
  22. John Doe

    Cookie management and syntax highlighting FTW. Great job!

    July 17th, 2012 at 03:31
  23. njspsoft

    Issue 5705 ,please,Look at the reasons

    July 17th, 2012 at 08:59
  24. cancel bubble

    Thank you so much for your awesome work, however, one minor complaint.

    The gray color used for autocompletion is way too light. I can barely see it on my monitor from a normal viewing distance.

    July 17th, 2012 at 10:09
    1. Jan Odvarko

      Please create an issue report so, it isn’t forgotten here.

      July 18th, 2012 at 04:16
  25. agadir

    first time i use firebug, and first time i understand that i lost time of my life using others addons – Thanks Firebug team, i’m loving you

    July 18th, 2012 at 03:47
  26. Jared

    The announcement says that the new version of Firebug only works with FF 13 and update. This would seem to imply that it doesn’t work in the current Firefox ESR release (FF 10). Is that possible? That would seem like a big oversight.

    July 18th, 2012 at 11:19
    1. Janet Swisher

      ESR gets only security and stability updates, not new features. That’s the trade-off of ESR. Release notes for the current ESR update are at I assume that Firebug 1.10 requires Firefox 13 because it depends on specific new features in Firefox 13 that ESR 10 doesn’t have. You can use ESR 10 with Firebug 1.9.

      July 18th, 2012 at 12:26
      1. Jan Odvarko

        Thanks for the explanation, it’s exactly correct.

        July 19th, 2012 at 03:58
  27. Dot

    Is there any way to turn syntax highlighting off? (Or at least, a part of it.) The boxes around pairs of braces are extremely visually noisy when developing in FB, aarg!

    July 18th, 2012 at 13:15
    1. Jan Honza Odvarko

      Yes, set ‘extensions.firebug.enableOrion’ preference (in about:config) to false

      July 19th, 2012 at 04:03
  28. njspsoft

    5705 The problem has not solved? I update firefox version 14,but Right-click the frame (#workflow) and choose This Frame > Reload Frame from the context menu
    problems still exist

    July 20th, 2012 at 23:32
    1. Sebastian Z.

      Please put your comments about into that issue. It’s not necessary to also post here.


      July 24th, 2012 at 22:07
  29. Paul Lowther

    A fantastic range of updates, especially trace styles.

    July 24th, 2012 at 06:53
  30. Just some dude

    Webkit’s dev tools are certainly respectable, but they still can’t touch Firebug, and with these new features, Webkit has even more catching up to do. Just gotta convince my colleagues of this :-). Thank you for making my job so much easier!

    July 31st, 2012 at 15:51
  31. Mahesh

    Fantastic new features… you guys rock !!!

    August 1st, 2012 at 19:34
  32. Satej

    Thanks for changes guys. Please continue the great job you are doing :)

    August 1st, 2012 at 21:49
  33. Ian

    Since a forced update to firebug 1.10… I’m unable to set breakpoints at all!? All javascript code-lines are greyed out and breakpoints are “undefined” with a “out of range” WTH, ?? I can’t do any work.

    August 3rd, 2012 at 14:35
    1. Jan Honza Odvarko

      Please create a bug report here plus detailed instructions how to reproduce the problem and we’ll fix it, thanks!

      August 4th, 2012 at 02:58
      1. Ian

        Filed issue 5790, let me know if I can provide anything else.

        August 6th, 2012 at 09:16
    2. Ken Amron


      I have experienced something similar which may have the same root cause as what you describe. I have not yet been able to provide a reproducible test-case. However I have been able to work around the problem I experienced as described here ==>


      August 5th, 2012 at 04:29
    3. Sebastian Z.

      nonneophyte posted a followup on this at!topic/firebug/qLgaqVTA0Po.


      August 5th, 2012 at 08:06
  34. Tlacaelel

    Thank you for the great work, this extension has helped me a lot.

    I have noticed that whenever I run firefox and firebug for a long time the browser slows down when refreshing the page, if I then disable firebug and do a refresh everything works as expected, is this normal?, also I have noticed a huge drain in memory when using firebug.

    August 6th, 2012 at 15:43
    1. Jan Honza Odvarko

      Try to run Firebug with Firefox 15 (currently beta) and let us know if the memory problems still persist.

      August 6th, 2012 at 22:39
      1. Tlacaelel

        Just noticed that this might actually have to do with my computer, nvidia had installed a plugin called 3D vision I guess when I installed the driver and also there was 3 plugins from ms office.

        The fan was running on my computer non stop whenever I ran firefox with firebug but by disabling those plugins (both nvidia and ms office) the fan stopped immediately and there seems to be no more memory leaks.

        I will re enable the ms office and test if that was the problem and then test with nvidia and let you know!

        Just so you know this only happen when both firefox was running and the firebug panels were enabled although disabling those plugins seem to have fixed the problem.

        August 7th, 2012 at 08:48
  35. elparole

    Hi, I’m using firebug for few years now and very appreciate your work. Today, suddenly feature of live previewing current net requests disappeared. I can see new requests only when I change tab to another and back to net. Is it a feature? Were can I turn it on again?

    August 21st, 2012 at 06:46
    1. Jan Honza Odvarko

      and let us know if the problem persist.


      August 21st, 2012 at 06:53
      1. elparole

        Works great now.

        August 21st, 2012 at 07:25
  36. Hossein Zolfi

    Great works,

    August 22nd, 2012 at 13:36
  37. Ngo Huynh

    I don’t know whether firebug extension in my firefox 15.x browser has bug. I cannot using it in right way. I have to disable and then enable to use it.
    But when I update to firefox 16.x, it works like normal.
    Very strange.

    November 7th, 2012 at 04:47
    1. Jan Odvarko

      Does it still happen if you upgrade to Firebug 1.10.6?

      November 7th, 2012 at 06:27
      1. Ngo Huynh

        Dear Jan,

        The problem doesn’t happen to the new Firebug 1.10.6 with Firefox 16.0.2.

        By the way, I must say THANKS to Firebug development team for a very useful add-on. Firebug is an essential tool for web developer like me

        Thanks a lot :)

        November 7th, 2012 at 06:59

Comments are closed for this article.