Firebug 1.11 New Features

Firebug 1.11 has been released and so, let’s take a look at some of the new features introduced in this version.


First of all, check out the following compatibility table:

  • Firebug 1.10 with Firefox 13.0 – 17.0
  • Firebug 1.11 with Firefox 17.0 – 20.0

Firebug 1.11 is open source project surrounded by contributors and volunteers and so, let me also introduce all developers who contributed to Firebug 1.11

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Florent Fayolle
  • Steven Roussey
  • Farshid Beheshti
  • Harutyun Amirjanyan
  • Bharath Thiruveedula
  • Nikhil Verma
  • Antanas Arvasevicius
  • Chris Coulson

New Features

SPDY Support

Are you optimizing your page and using SPDY protocol? Cool, the Net panel is now indicating whether the protocol is in action.

Performance Timing Visualization

Another feature related to page load performance. If you are analyzing performance-timing you can simply log the timing data into the Console panel and check out nice interactive graph presenting all information graphically.

Just execute the following expression on Firebug’s Command Line:


Read detailed description of this feature.

CSS Query Selector Tool

Firebug offers new side panel (available in the CSS panel) that allows quick execution of CSS selectors. You can either insert your own CSS Selector or get list of matching elements for an existing selector.

In order to see list of matching elements for an existing CSS rule, just right click on the rule and pick Get Matching Elements menu item. The list of elements (together with the CSS selector) will be displayed in the side panel.

New include() command

Firebug supports a new command called include(). This command can be executed on the Command Line and used to include a JavaScript file into the current page.

The simplest usage looks as follows:

If you are often including the same script (e.g. jqueryfying your page), you can create an alias.
include("", "jquery");

And use the alias as follow:

In order to see list of all defined aliases, type: include(). Note, that aliases are persistent across Firefox restarts.

Read detailed description of this command on Firebug wiki.

Observing window.postMessage()

Firebug improves the way how message events, those generated by window.postMessage() method, are displayed in the Console panel.

The log now displays:

  • origin window/iframe URL
  • data associated with the message
  • target window/iframe object

See detailed explanation of the feature.

Copy & Paste HTML

It’s now possible to quickly clone entire parts of HTML markup by Copy & Paste. Copy HTML action has been available for some time, but Paste HTML is new. Note that XML and SVG Copy & Paste is also supported!

See detailed explanation of the feature.

Styled Logging

The way how console logs can be styled using custom CSS (%c formatting variable) has been enhanced. You can now use more style formatters in one log.

console.log("%cred-text %cgreen-text", "color:red", "color:green");

See detailed explanation of this feature.

Log Function Calls

Log Function Calls feature has been improved and it also shows the current stack trace of the place where monitored function is executed.

See detailed explanation of this feature.

Improved $() and $$() commands

Firebug also improves existing commands for querying DOM elements.

$() command uses querySelector()
$$() command uses querySelectorAll()

It also means that the argument passed in must be CSS selector.

So, for example, if you need to get an element with ID equal to “content” you need to use # character.


If you forget, Firebug will nicely warn you :-)

Autocompletion for built-in properties

The Command Line supports auto-completion even for built-in members of String.prototype or Object.prototype and other objects.

There are many other improvements and you can see the entire list in our release notes. You can also see the official announcement on

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko


  1. Brett Zamir

    Wow, do you all ever sleep? :) Exciting!

    December 7th, 2012 at 21:23

  2. Šime Vidas

    Great new features! Keep it up. :-)

    December 8th, 2012 at 09:31

  3. Sinevar

    Wow! Great work guys! Keep going, you are all amazing!

    December 9th, 2012 at 10:11

  4. Anonymous

    There is no screenshot for the usage of the $() and $$() commands.

    So I don’t understand how/where to use them.

    December 10th, 2012 at 08:04

    1. Jan Honza Odvarko

      $() and $$() are built-in commands that can be executed on Firebug’s Command line. Open the Console panel and see the command line at the bottom.

      See Command Line screenshots on our wiki:

      And examples how to use $() and $$():$$$


      December 10th, 2012 at 08:15

  5. Alexandre Leduc

    I love the include() command! I always wanted an easy way to load jQuery and some custom scripts on any website I visit (and I can’t be bothered to learn how to use Greasemonkey).

    December 10th, 2012 at 10:47

    1. Jan Honza Odvarko

      Excellent! You might also bee interested in an enhancement we are just working on, see:


      December 10th, 2012 at 10:57

      1. Anonymous

        I think jQuery is so ubiquitous that it ought to have a default alias.

        December 10th, 2012 at 11:03

        1. Jan Honza Odvarko

          We were actually thinking about that, but what URL would be associated with the alias? Compressed jQuery, latest build, stable build,… ?

          December 11th, 2012 at 06:29

          1. Anonymous

            Uncompressed latest.

            Compressed are for production.
            Uncompressed are for development.
            So it would be uncompressed.

            Latest probably because it would be developers who use it, and it doesn’t require 100% stability since its not production.

            So either uncompressed latest, or uncompressed stable.

            December 11th, 2012 at 07:27

          2. Jan Honza Odvarko

            True, you might be right. Please create a new report in our issue list so, it isn’t forgotten.


            December 12th, 2012 at 00:05

  6. Jerrod Hart

    Great work! Thanks for the updates!!!!!!

    December 11th, 2012 at 09:26

  7. skierpage

    A lot of JavaScript pages define $ to be the jQuery object. Is there some other way to access Firebug’s $ object?

    This article’s TOC links don’t work on E.g first links to fragment #SPDY, but the HTML has h3 id=”"spdy"”.

    December 12th, 2012 at 13:55

    1. Jan Honza Odvarko

      > A lot of JavaScript pages define $ to be the jQuery object. Is there
      > some other way to access Firebug’s $ object?
      Good question, I don’t think so. I reported this here:

      > This article’s TOC links don’t work on
      > E.g first links to fragment #SPDY, but the HTML has h3 id=””spdy””.
      Fixed, thanks!


      December 13th, 2012 at 01:40

  8. Fredrik Stöckel

    sweet stuff! – nice work

    December 13th, 2012 at 01:21

  9. pd

    The great progress continually made with Firebug really is an enormous relief for me. Keeps my faith in the Firefox project overall. Thanks to all those working so very hard to enable me to do my job so much easier. I expect if I tried to remember what life was like before Firebug, as a web dev, I’d have nightmares for months later :)

    Love every single person who contributes. Thanks for another great release and a massive year of continued Firebug brilliance.

    December 14th, 2012 at 12:03

Comments are closed for this article.