Mozilla

Firebug 1.10 New Features

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

Firebug

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

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

Posted by on at

58 comments

Comments are now closed.

  1. Benjamin wrote on July 13th, 2012 at 07:55:

    Great Job !

  2. Brian wrote on July 13th, 2012 at 08:53:

    So Excited,

    Thanks Guys!

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

    thanks a lot

  4. Spencer wrote on July 13th, 2012 at 14:23:

    Dude… you’re Batman…

  5. Jesse wrote on July 13th, 2012 at 16:03:

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

  6. jlapitan wrote on July 13th, 2012 at 16:07:

    wooohoo! love the new features..

  7. Joshua wrote on July 14th, 2012 at 02:32:

    Great new features!

    Thank you!

  8. Byzod wrote on July 14th, 2012 at 03:50:

    We need auto completion for multiline editor…

    1. Sebastian Z. wrote on July 17th, 2012 at 00:31:

      Auto-completion for the Command Editor is already planned.

      Sebastian

    2. asdfasdf wrote on July 19th, 2012 at 16:08:

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

  9. Moss wrote on July 14th, 2012 at 04:42:

    Great new features!

  10. Mahendra wrote on July 14th, 2012 at 05:01:

    Wonderful work
    Thanks for all.

  11. Sebastian wrote on July 14th, 2012 at 08:06:

    Great job!
    A must have tool these days.

    Thank you all.

  12. Webdoc wrote on July 14th, 2012 at 09:25:

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

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

    !! LIKE !!

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

    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.

    1. Jan Odvarko wrote on July 14th, 2012 at 23:52:

      Syntax highlighting for the Script panel is planned.

  15. Vincent F. wrote on July 14th, 2012 at 13:55:

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

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

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

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

    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!

  18. ken wrote on July 14th, 2012 at 19:15:

    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.

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

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

      Honza

      1. Ken wrote on July 24th, 2012 at 07:09:

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

  19. Adrian wrote on July 15th, 2012 at 23:49:

    Firebug 1.10 keeps up the great work on this fantastic product

  20. pd wrote on July 16th, 2012 at 02:09:

    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!

  21. spsoft wrote on July 16th, 2012 at 07:38:

    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?

    1. Jan Odvarko wrote on July 16th, 2012 at 08:04:

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

      Thanks!
      Honza

  22. John Doe wrote on July 17th, 2012 at 03:31:

    Cookie management and syntax highlighting FTW. Great job!

  23. njspsoft wrote on July 17th, 2012 at 08:59:

    Issue 5705 ,please,Look at the reasons

  24. cancel bubble wrote on July 17th, 2012 at 10:09:

    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.

    1. Jan Odvarko wrote on July 18th, 2012 at 04:16:

      Please create an issue report so, it isn’t forgotten here.
      http://code.google.com/p/fbug/issues/list
      Honza

  25. agadir wrote on July 18th, 2012 at 03:47:

    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

  26. Jared wrote on July 18th, 2012 at 11:19:

    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.

    1. Janet Swisher wrote on July 18th, 2012 at 12:26:

      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 https://www.mozilla.org/en-US/firefox/10.0.6/releasenotes/ 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.

      1. Jan Odvarko wrote on July 19th, 2012 at 03:58:

        Thanks for the explanation, it’s exactly correct.
        Honza

  27. Dot wrote on July 18th, 2012 at 13:15:

    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!

    1. Jan Honza Odvarko wrote on July 19th, 2012 at 04:03:

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

  28. njspsoft wrote on July 20th, 2012 at 23:32:

    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

    1. Sebastian Z. wrote on July 24th, 2012 at 22:07:

      Please put your comments about http://code.google.com/p/fbug/issues/detail?id=5705 into that issue. It’s not necessary to also post here.

      Sebastian

  29. Paul Lowther wrote on July 24th, 2012 at 06:53:

    A fantastic range of updates, especially trace styles.

  30. Just some dude wrote on July 31st, 2012 at 15:51:

    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!

  31. Mahesh wrote on August 1st, 2012 at 19:34:

    Fantastic new features… you guys rock !!!
    Thanks.

  32. Satej wrote on August 1st, 2012 at 21:49:

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

  33. Ian wrote on August 3rd, 2012 at 14:35:

    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.

    1. Jan Honza Odvarko wrote on August 4th, 2012 at 02:58:

      Please create a bug report here http://code.google.com/p/fbug/issues/list plus detailed instructions how to reproduce the problem and we’ll fix it, thanks!
      Honza

      1. Ian wrote on August 6th, 2012 at 09:16:

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

    2. Ken Amron wrote on August 5th, 2012 at 04:29:

      Ian,

      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 ==> https://sites.google.com/a/digital-parts.com/firbugstu/

      Ken

    3. Sebastian Z. wrote on August 5th, 2012 at 08:06:

      nonneophyte posted a followup on this at https://groups.google.com/forum/#!topic/firebug/qLgaqVTA0Po.

      Sebastian

  34. Tlacaelel wrote on August 6th, 2012 at 15:43:

    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.

    1. Jan Honza Odvarko wrote on August 6th, 2012 at 22:39:

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

      1. Tlacaelel wrote on August 7th, 2012 at 08:48:

        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.

  35. elparole wrote on August 21st, 2012 at 06:46:

    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?

    1. Jan Honza Odvarko wrote on August 21st, 2012 at 06:53:

      Try https://getfirebug.com/releases/firebug/1.11/firebug-1.11.0a1.xpi
      and let us know if the problem persist.

      Honza

      1. elparole wrote on August 21st, 2012 at 07:25:

        Works great now.
        Thanks!

  36. Hossein Zolfi wrote on August 22nd, 2012 at 13:36:

    Great works,
    Thanks

  37. Ngo Huynh wrote on November 7th, 2012 at 04:47:

    Hi,
    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.
    :)

    1. Jan Odvarko wrote on November 7th, 2012 at 06:27:

      Does it still happen if you upgrade to Firebug 1.10.6?
      Honza

      1. Ngo Huynh wrote on November 7th, 2012 at 06:59:

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

Comments are closed for this article.