Mozilla Hacks

Firebug 1.12 New Features

By

Posted on August 21, 2013 in Firebug

Firebug team released fresh new Firebug 1.12 and here is a list of some new features we have implemented in this version.

  • Firebug 1.12 is compatible with Firefox 23 – 26

Firebug is an open source project maintained by developers from around the world and I can’t miss this opportunity to introduce all members who contributed to Firebug 1.12

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Farshid Beheshti
  • Steven Roussey
  • Florent Fayolle
  • Awad Mackie
  • Belakhdar Abdeldjalil
  • Thomas Andersen
  • Hisateru Tanaka

New Features

Copy CSS Properties

Copying CSS properties into the clipboard has never been easier. It is now possible to copy individual CSS properties or rules or entire styles into the clipboard. Just right click on the part you want to copy. See detailed description of this feature.

copy-css

New Net Panel Filters

The old Flash filter has been renamed to Plugins and covers Flash as well as Silverlight HTTP requests. There is also a new filter labeled Fonts that is used to see HTTP requests for custom fonts only (font/ttf or font/woff mime-types).

net-panel-filters

Use filter button tooltip to see detailed info about filtered files.

Filter for DOM Events Log

This feature allows to filter DOM event logging that is set for specific element. The next screenshot shows related user interface. There is a new submenu that allows to pick what events should be logged for selected element.

dom-events-filter

You can also help us improve the UI/UX of this feature.

Autocompletion Popup Improved

Autocompletion popup window that is available on Firebug Command Line (within the Console panel) has improved its design and it also offers built-in command line API.

auto-completion-popup

Note that the bottom section of the popup window offers Firebug Command Line API.

Use in Command Line

This feature allows referring various page objects (HTML elements, JS objects, network requests, cookies, etc.) from the command line using new $p variable. The $p variable can also be used within command line expressions.

use-in-command-line

See detailed description of this feature.

Group Console Messages

Console messages are grouped now in case the messages appear multiple times consecutively. This feature can dramatically decrease number of logs and make the entire logging easier!

group-console-messages

Better Infotip for HTTP Request Timings

The tooltip for individual HTTP requests displayed in the Net panel has been improved. It displays all phases of the current request as a little waterfall graph. It’s now a lot easier to understand the timing.

net-panel-timings

Multiple Filters for Console & Net Panel

The Console and Net panels support selection of multiple filters at the same time. Just hold down Ctrl key when clicking the filter buttons. This allows to see e.g. only Errors and Warnings in the Console panel or e.g. only HTML, CSS and JS files in the Net panel. See the screenshot.

multiple-filters

Toggle Visibility of Side Panels

You can now toggle visibility of side-panels. The state is persistent across Firefox restarts. See couple of screenshots.

toggleSidePanels1

If you don’t need the Selectors side panel you can keep it hidden.

toggleSidePanels2

Store the result of the last command line evaluation in $_

Firebug implements a new variable available in the Command Line: $_. This variable stores the result of the previous expression evaluation (compatible with Chrome dev tools).

store-last-command-line-result

New command: getEventListeners()

Firebug implements a new Command Line command: getEventListeners(). This command returns the event listeners registered on a given object. The object is usually an element, but it can also be e.g. a window.

get-event-listeners1

After you execute the command on the Command Line you can further inspect the return object in the DOM panel. See the following screenshot.

get-event-listeners2

Copy as cURL

It is possible to create cURL command from a network request in order to test the request from the terminal window. Just right click on a request in the Net panel and pick Copy as cURL.

copy-as-curl

Precision for Console API %f log pattern

Floats can be rounded by using the %.xf pattern inside the first console.log() argument. Here x denotes the number of decimal places the number should be rounded to.

console.log("amount: %.2f", 4.3852)
will output
amount: 4.39

precision

You may want to get to know about the other patterns available inside the Console API.

Show/hide stack arguments

Stack frames displayed in the Stack panel can be sometimes unusable due to a long list of arguments and so, Firebug introduced a new option Show Arguments allowing to show/hide them.

showArguments

CSS Panel Improvements

Firebug introduces several improvements for the CSS panel. A lot more CSS information is now available.

  • @page rules are displayed
  • files with @media elements are displayed
  • @keyframes rules are now displayed
  • @-moz-document rules are displayed

css-panel

There is a lot more new enhancements and you can see the entire list in our release notes. You can also see the official announcement on getfirebug.com.

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko

19 comments

  1. Marc Devol

    Great work. Special thanks for $_, $p, Group Console Messages and getEventListeners. <3 <3 <3

    August 21st, 2013 at 12:46

  2. Ivan Dejanovic

    Out of many fantastic Firefox addons Firebug is my favorite one and the one I use the most. Thanks for all the great work you put into building this awesome tool. I apologize is this was asked and answered before. Are there any plans for Firebug for Firefox for Android.

    August 22nd, 2013 at 02:27

    1. Jan Honza Odvarko

      Firebug for Firefox for Android: Yes. We are in the middle of adopting JSD2 (new Mozilla Debugging API) and second step of this process is support for remote debugging. As soon as remotability is in place – Firebug should be able to connect even Firefox running on Android.

      August 22nd, 2013 at 05:28

  3. Jessica

    I just want to give a great big steaming thank-you to all of the fine robust men who have put so much effort into Firebug. You’ve made this webmistress very very happy!

    August 22nd, 2013 at 05:18

  4. Edwin Yip | Live CSS Editor

    Great! The new Firebug features make Firefox much useful, especially considering the *speed improvement* in the latest version of Firefox!

    Firebug is innovative by itself, and its html inspector is inspiring my live html and css code editor :)

    August 22nd, 2013 at 06:22

  5. Marcelo Ramos

    I’m loving the command line improvements. Great work!

    August 22nd, 2013 at 07:54

  6. Alexander Tkachenko

    After the last update FireFox does not work Pixel Perfect, great addition to FireBug and very sad that it’s not working.

    August 22nd, 2013 at 08:32

    1. Jan Honza Odvarko

      I like PixelPerfect too! I personally provided a patch that makes PixelPerfect compatible with Firebug1.12 again. See: https://github.com/openhouseconcept/PixelPerfect/pull/59

      Please ping the extension author to release new version soon :-)

      August 22nd, 2013 at 09:16

      1. Alexander Tkachenko

        Many thanks for the correction of an error with the button in the pixel perfect!!)))

        August 25th, 2013 at 23:12

  7. Damien Lebreuilly

    You rock! Congratulations and thanks for this release, that’s awesome!

    August 22nd, 2013 at 09:27

  8. Hoàng nghiêm

    i like firebug, it helped me a lot

    August 24th, 2013 at 08:58

  9. Pavel Forkert

    Guys, it’s great to see so many improvements to firebug! However I want to understand why do we need 2 development toolkits in Firefox (Firebug and DevTools), which share a large amount of functionality. Can anyone clarify that?

    August 25th, 2013 at 12:53

    1. Jan Honza Odvarko

      Firebug has always been maintained rather as an independent project outside of existing processes and Firefox environment while DevTools is a Mozilla in-house project using standard procedures. Note that Firebug goal has historically been to complement Firefox features and not compete with them (Firebug is an extension after all) and we want to keep this direction by making Firebug unique tool.

      August 26th, 2013 at 03:26

      1. Luke

        What about speed? Have they improved performance of this version of Firebug? That’s one of the main reasons I switched to built-in devtools.

        August 26th, 2013 at 20:23

        1. Jan Honza Odvarko

          We did many performance improvements and also got feedback that performance is better. The current bottleneck is JSD1 (the old Firefox debugging engine) used by Firebug and we are currently in the middle of process to replace it by JSD2 (new debugging engine). This refactoring will also have good impact on Firebug performance during debugging.

          August 27th, 2013 at 00:45

  10. pd

    Another top notch release. Ok there’s a couple of things that annoy me but overall, the quality and utility of the ‘bug continues to shine.

    August 28th, 2013 at 07:10

    1. Jan Honza Odvarko

      Thanks for your never-ending support!

      August 30th, 2013 at 00:52

  11. aguru

    Firebug is awesome. Then again Firefox has its own dev tools. Sometimes I think why don’t they merge both integrated in Firefox. This way there’s only one dev path.

    August 28th, 2013 at 19:40

  12. Mathew Porter

    Some great new features, I must say that Firebug is my favourite dev tool and is probably the only thing that is keeping me using FireFox for my browser of choice for development.

    September 1st, 2013 at 10:24

Comments are closed for this article.