What’s New in Firebug 2.0

Firefox 30 was released on June 10, 2014. It’s a little lackluster but Mozilla are entitled to a break following the browser’s major overhaul in version 29. The most interesting changes:

  • a new background-blend-mode CSS3 property which defines how background colors and images blend together (overlay, multiply, lighten, etc.)
  • Box model highlighting and console.count support in the developer console.
  • It’s now impossible to remove default drop-down arrow styling on select boxes with -moz-appearance: none or the text-indent hack (Bugzilla 649849). Thanks Mozilla — my forms look crappy again and I can’t write that article now!

More significantly, Firebug 2.0 has been launched. It’s taken a while to reach the milestone given the project is almost a decade old and the current trend for rapidly-incrementing version numbers. The world’s first (good) developer console was starting to fall behind its imitators as vendors improved native browser tools.

Firebug 2.0 implements several new features and enhancements…

Interface Update

The interface has received a refresh. Panels can be shown or hidden from the main Firebug menu:

In addition, we’ve finally received syntax highlighting:

Events Inspector

The new Events panel in the HTML tab lists all events attached to the selected DOM element and links to the script handler. Chrome’s Inspector has had this feature for a while and it’s incredibly useful:

JavaScript Expression Inspection

The value of any variable or expression can be inspected by hovering the cursor over the code:

Improved Auto-Completion

Code auto-completion is available on most panels — press tab to open the suggestion drop-down and select an item. It can also be used when editing HTML/SVG attributes and within a breakpoint condition:

Miscellaneous Updates

As well as the usual bug fixes and speed improvements, you can also look forward to using the following features:

  • Scripts can be de-minified using the “{}” icon.
  • HTML attributes can be added quickly by clicking the ‘>’ of the opening tag.
  • Console messages from the same line are grouped (uncheck Group Log Messages on the Console tab drop-down menu to show all messages).
  • The search box permits CSS selectors and regular expressions.
  • CSS color values can now be shown ‘As Authored’ (as well as hex, RGB or HSL) in the CSS panel drop-down menu.
  • Registered mutation observers can be inspected by issuing a getEventListeners(element) command from the console.

Firebug’s Future

Firefox’s native development tools are great but I still switch to Firebug when I need deeper analysis. It remains my favorite developer console but that’s probably because I’ve been using it since the early alpha days. Some will complain it doesn’t have functionality found elsewhere, although third-party extensions more than make up any shortfall.

Development may diminish over time now vendors are competing to add better browser tools. However, this may never have occurred if it weren’t for Joe Hewitt’s revolutionary add-on. It’s beneficial having a non-vendor creating developer tools unencumbered by commercial, political and technical pressures.

If you’re a web developer, you need Firefox and Firebug should be the first add-on you install.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • matt

    Really buggy. Pops up randomly in places where it shouldn’t be when browsing/working. Don’t work properly with responsive tools like Viewport Resizer.

    • Craig Buckler

      It sounds as if you should clear your activation list from the Firebug menu. Unlike the other dev tools, Firebug remembers where you used it and will re-show it next time you access. What’s slightly confusing is that closing the Firebug window doesn’t deactivate the tool.

      As for working with other tools, open it in a separate window if there’s an issue.

      • matt

        No, I meant it pops up and closes, like flashes for a half of second out of nowhere.

        • rahilwazir

          True! Same issue here.

          • Craig Buckler

            Weird. Are you running it in Firefox 30? It should check that. Perhaps a re-install would help?

  • Ahmad Samiei

    Firebug is great after all this years. but I’m switched to native dev-tools in last version because of some performance issue on adding multiple add-ons. now I can cover most(probably all) of my requirements in native version.

    • Craig Buckler

      Performance is the biggest issue for me. Unsurprisingly, native tools open instantly while Firebug has a significant delay. Perhaps that’s something they can improve, but it’ll never be faster than a native tool.

      • Sebastian Zartner

        The reason why Firebug 2.0 opens slower than the native DevTools is owed to its outdated activation module, which needs to be reworked in order to gain a performance boost.

        Background info: Firefox add-ons and the built-in DevTools use the same technology. The whole functionality within the Firefox UI is realized via JavaScript. So the statement “it’ll never be faster than a native tool” is not correct. Firebug just needs to improve some code logic.

    • matt

      I’m still stuck with Firebug because native tools don’t have shortcut to Copy Rule Declaration.

  • Bruno Seixas

    Although I prefer and use Chrome Dev Tools I follow up FireBug for Firefox.
    It seems to be moving in the right direction, really liked the UI changes.

    • http://www.mathewporter.co.uk/ Mathew Porter

      Im the same, switched to Chrome and love some of the mobile emulation features. I again ditched FF mainly for performance issues when multiple addons were in the mix.

      • Bruno Seixas

        Totally understand you, for me it was +/- the same.
        And yeah the mobile emulation features are really great. Finally I could retire Opera Mobile Emulator.

  • dojoVader

    Well i love Chrome Devs tools better in debugging but when it comes to monitoring XMLHttpRequest and Post Parameters i love Firebug in Chrome it makes me cranky with the way you have to look for the Post Parameters

    • Bruno Seixas

      I can relate to that. I guy cant have best of two worlds…. yet :p

  • DanOwen

    Still a Firebug true believer for the same reasons you described. Go you little bug!

  • Kelderic

    I was using the native tools until a few versions back. Currently I can’t seem to make a selection persistent. Hovering over another element changes which is highlighted.

  • govertz

    Firebug forever! If it wasn’t for firbug I wouldn’t have succeed in my way to selftaught developer, whenever I will analyze something, I click my firebug icon.
    Firebug opened up a whole new world to me, and I’ll keep using it before anything else.

  • Sebastian Zartner

    The Events panel of Firebug has the

  • Sharath

    Firebug all the way,it is savior for me,prefer it more than chrome dev tools.

  • Mohd. Mahabubul ALam

    Firebug is an open source project maintained by developers from
    around the world and here is a list of all members who contributed to
    Firebug 2

    Jan ‘Honza’ Odvarko

    Sebastian Zartner

    Simon Lindholm

    Florent Fayolle

    Farshid Beheshti

    Steven Roussey

    Markus Staab

    Sören Hentzschel

    Belakhdar Abdeldjalil

    Thomas Andersen

    Jakob Kaltenbrunner

    David Gomez

    Leif Dreizler

    Luca Greco

    Benediktas Knispelis

    There are also plenty of translators who localized Firebug into 35 languages!

    Before we jump right into the details, let’s see how the current UI
    looks like. Firebug 2 went through a face lift in this version. World
    class designers have been working on the new theme and the user
    interface is now clean and more intuitive.

    Firebug 2 UI:

    The screenshot shows Win OS theme other OSes (Linux and Mac) have own custom theme.

    New Features

    Firebug 2 introduces many new features and bug fixes also because we
    completely removed dependency on the ancient Firefox debugging engine
    (aka JSD1) and incorporated new debugging engine known as JSD2.

    Syntax Highlighting

    Pretty Print

    DOM Events Inspector

    Searching in the HTML Panel

    Code Auto Completion

    JavaScript Expressions Inspector

    Console Log Grouping

    Inspect JavaScript Function Return Value

    Show/Hide Firebug Panels

    Displaying Original CSS Color Values

    Quickly create new HTML attribute

    Inspect Registered Mutation Observers

    Syntax Highlighting

    One of the most visible new features is probably that the Script panel supports JavaScript syntax highlighting.

    Syntax coloring is also there if you edit HTML as a free text by
    clicking on the Edit button in the toolbar. The same for CSS source edit
    mode…

    Pretty Print

    The Script panel also supports pretty-printing and if you deal with
    minified JavaScript code you’ll find this feature extremely useful.

    DOM Events Inspector

    Firebug 2 integrates existing EventBug extension and introduces new Events
    side panel within the existing HTML panel. This panel lists all of the
    event handlers on the page grouped by event type for the currently
    selected DOM element. The panel is nicely integrated with other Firebug
    panels and allows to quickly find out which HTML element is associated
    with specific event listener or see the JavaScript source code (read more).

    Searching in HTML Panel

    Search in the HTML panel has been improved and the user can now use CSS selectors or regular expressions to find specific elements.

    Code Auto Completion

    Code auto-completion system has been improved across Firebug 2 UI on
    several places. It’s now available in the Command Editor (within the
    Console panel) where you can press the key to open a little completion popup window.

    Auto completion works even in breakpoint-condition popup dialog where it offers variables in the current scope.

    You can enjoy auto-completion when editing HTML attributes (works for
    SVG attributes too) and also within HTML style attribute. All these
    little details make Firebug an awesome tool to use!

    JavaScript Expressions Inspector

    When debugging and stepping through your code you can quickly inspect
    and explore details of any JavaScript expression you see in the Script
    panel. Just hover your mouse over the expression or selected piece of
    code and see the result in the tooltip.

    You can also right click on an expression (or again on the current selection) and pick Use in Command Line or Inspect in DOM Panel actions.

    Console Log Grouping

    There is new option in the Console panel that allows to group console
    logs coming in a row from the same location (on by default).

    Inspect JavaScript Function Return Value

    This feature allows to examine and modify return value of a JavaScript function. See an example:

    function myFunction() {

    return foo();

    }

    The usual problem in other debuggers and tools is is how to examine the return value of foo(). Firebug allows that by stepping through a return statement and displaying the value within the Watch side panel. It even allows you to modify the return value through the Watch panel just like other values (read more).

    Show/Hide Firebug Panels

    One change we introduced in Firebug 2 is the way how to hide/show
    individual panels. Check out the next screenshot that depicts how it’s
    done.

    Displaying Original CSS Color Values

    Another nice enhancement allows displaying original CSS color values. There is a new option Colors As Authored
    in the CSS panel that allows displaying CSS color values as they were
    defined. This makes it easier to compare the styles interpreted by the
    browser with the ones inside the original CSS source file. While this
    new option is now the default, you still have the possibility to switch
    to hexadecimal, RGB or HSL formatting.

    Quickly create new HTML attribute

    There is a new way how to quickly create new attributes for HTML
    elements. All you need to do is hover mouse cursor over the closing
    arrow bracket of an element you want to add a new attribute to. See, the
    cursor changes its shape into a hand.

    Click on the closing tag to open an inline editor and start typing an attribute name.

    The rest works as usual. After you typed the name press the tab key and type the attribute value.

    Inspect Registered Mutation Observers

    The existing getEventListeners() command (see a Firebug tip) has been extended and it now displays also registered mutation observers for given element.

    You can use this test page to try it yourself.

    See also Firebug 2.0 release notes.

    Firebug Extensions

    As usual we spent some time testing existing Firebug extensions. Here
    is a list of those that passed our review and work with Firebug 2.0.

    AMF Explorer
    AMF Explorer is based on the JSON Explorer and XML Explorer features of
    Firebug, AMF Explorer allows web developers to view deserialized AMF
    messages in Firebug’s Net panel.

    Console Export Export data from the Console panel

    CSS Usage See what CSS rules and properties are actually used in your app.

    Firediff Additional insight into the changes that are being made to the components of the page

    FireLogger Logging support for web developers (PHP, Python, ColdFusion) (see also this post)

    FirePath adds a development tool to edit, inspect and generate XPath 1.0 expressions and CSS 3 selectors

    FirePicker Adds color picker to Firebug’s inline CSS editor. (see also this post)

    FireQuery Adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers. (see also this post)

    FireStorage Plus!
    Is an extra panel to Firebug for displaying and manipulating the web
    storage containers such as localStorage and sessionStorage. (see also this post)

    FlashFirebug
    Debug ANY AS3 SWF files on the web. Edit properties and inspect
    elements. Redirect SWF output to the extension. Run AS3 code and
    transform objects on the fly. Access SWF assets with the decompiler.
    View AMF calls and Shared Objects and much more!

    Illuminations for Developers Takes JavaScript frameworks and makes their internals visible inside Firebug, including views, models, class names, and more.

    Javascript Deminifier Deminify javascript before it is downloaded.

    NetExport NetExport is a Firebug extension that allows exporting data from the Net panel.

    Omnibug Omnibug is a
    plugin for Firebug to ease developing web metrics implementations. Each
    outgoing request (sent by the browser) is checked for a pattern; if a
    match occurs, the URL is displayed in a Firebug panel, and decoded to
    show the details of the request. In addition, requests can be logged to
    the filesystem.

    PageSpeed
    Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web
    developers can use Page Speed to evaluate the performance of their web
    pages and to get suggestions on how to improve them.

    YSlow
    YSlow analyzes web pages and suggests ways to improve their performance
    based on a set of rules for high performance web pages. YSlow is also a
    Firefox add-on integrated with the Firebug web development tool.

    ZikulaBug
    ZikulaBug is a Firebug extension, which provides a friendly interface
    for Zikula’s DebugToolbar. It allows to browse Zikula debug data grouped
    in eight tabs: General, Configuration, SQL, Templates, Function
    Executions, Log Console, HTTP request and Settings.

    Dojo Firebug Extension Support for Dojo based app debugging.

    Firefinder find HTML elements matching chosen CSS selector(s) or XPath expression quickly.

    Fireflow Provides method call logs in a tree format.