Firebug lives on in Firefox DevTools

As you might have heard already, Firebug has been discontinued as a separate Firefox add-on.

The reason for this huge change is Electrolysis, Mozilla’s project name for a redesign of Firefox architecture to improve responsiveness, stability, and security. Electrolysis’s multiprocess architecture makes it possible for Firefox to run its user interface (things like the address bar, the tabs and menus) in one process while the content (websites) runs in other processes. With multiprocess architecture, if a website crashes, it doesn’t also crash the whole browser.

Unfortunately, Firebug wasn’t designed with multiprocess in mind, and making it work in this new scenario would have required an extremely difficult and costly rewrite. The Firebug Working Group agreed they didn’t have enough resources to implement such a massive architectural change. Additionally, Firefox’s built-in developer tools have been gaining speed, so it made sense to base the next version of Firebug on these tools instead.

The decision was made that the next version of Firebug (codenamed Firebug.next) would build on top of Firefox DevTools, and Firebug would be merged into the built-in tools.

And perhaps most importantly, we joined forces to build the best developer tools together, rather than compete with each other. Many of Firebug’s core developers are on the DevTools team, including Jan ‘Honza’ Odvarko and Mike Ratcliffe. Other Firebug Working Group members like Sebastian Zartner and Florent Fayolle are also active DevTools contributors.

A huge thank you to them for bringing their expertise in browser developer tooling to the project!

In practical terms, what does it mean to merge Firebug into DevTools?

Several features have been absorbed: The DOM panel, the Firebug theme, Server-side log messages, the HTTP inspector (aka XHR Spy), and various popular add-ons like FireQuery, HAR export, and PixelPerfect. Also, over 40 bugs were fixed to close the gap between DevTools and Firebug.

For curious readers, a couple of articles on hacks.mozilla.org and on the Firebug blog go into more detail.

If you are switching now from Firebug to Firefox DevTools, you will of course notice differences. This migration guide can help you.

We understand that disruption is never really welcome, but we are working hard to ensure developers have the best possible tools, and sometimes this means we need to refocus and use resources wisely.

You can help: Tell us which features you need are missing. There are a few ways you can do this:

We are already tracking missing features on this bug, and so far you have told us that the most important are these:

We thank you for your loyalty and hope you understand why we’ve made this difficult decision. The Firebug spirit lives on in all of the browser developer tools we build and use today.

The Firefox DevTools and Firebug teams

About Soledad Penadés

Sole works at the Developer Tools team at Mozilla, helping people make amazing things on the Web, preferably real time. Find her on #devtools at irc.mozilla.org

More articles by Soledad Penadés…

About Jan Honza Odvarko

Honza is working on Firefox Developer Tools

More articles by Jan Honza Odvarko…

About Patrick Brosset

Patrick manages the DevTools engineering team at Mozilla

More articles by Patrick Brosset…


11 comments

  1. Firefox User

    Is this available now in Firefox 50.1.0?

    December 20th, 2016 at 07:15

  2. Lawrence San

    Your list of “most important” items here doesn’t mention font color. That’s the single biggest annoyance for me. Right now the Console’s ordinary log text appears in red, and the alert/error text in black. Obviously it should be the other way around. I’m seeing this problem in all the themes, including the Firebug theme, so there’s probably some underlying issue that affects all of them.

    It’s very disconcerting to have to read ordinary log messages in red.

    December 20th, 2016 at 09:55

    1. Mark Fischer, Jr.

      How are you logging things in the console? You might be using the wrong function call, I’ve never seen normal logs printed in red in the firefox dev tools.

      December 21st, 2016 at 08:32

      1. Lawrence San

        Like this:

        console.log(“graphicSeriesScripts.js has loaded.”);

        That’s near the top of one of my separate JS files. How would you log it?

        In the Firebug theme, that message appears in red type. In the Light and Dark themes, it appears in a kind of muddy orange colored type. I can’t find anyplace where you can configure or adjust how it appears.

        December 23rd, 2016 at 10:36

  3. YepHep

    What about plugins such as FirePHP? Any chance that these could be shimmed to continue functioning under new DevTools? Otherwise we all be looking to migrate to https://github.com/ccampbell/chromephp I guess.

    December 20th, 2016 at 11:03

    1. FlyingHail

      https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages

      From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

      It uses the Chrome Logger protocol.

      December 21st, 2016 at 03:49

  4. Castle Snow

    FireBug is an amazing tool, thank all of the developers of it a lot!

    December 21st, 2016 at 01:21

  5. revyh

    How does these tools relate to deburgger.html?

    December 21st, 2016 at 18:45

    1. Patrick Brosset

      The tools discussed in this post (the Firefox DevTools) contain a debugger panel.
      This panel used to use XUL for its markup, and a bunch of Firefox-specific JavaScript code and APIs.

      debugger.html is a code name for a project: the goal of this project was to get rid of XUL and non-public JavaScript APIs, and have a debugger with only HTML and JS that can run in any browser.
      The project lives here: https://github.com/devtools-html/debugger.html/

      It can be used either standalone, or within Firefox DevTools since it replaces the old debugger panel that we used to have.

      January 3rd, 2017 at 01:50

  6. Eagle

    I’m missing watches and value hinting upon highlighting a variable in debugger :(

    January 6th, 2017 at 02:20

    1. Dan Callahan

      Watches and value hints on hover have been added for Firefox 54, which is currently on the Developer Edition channel :)

      March 31st, 2017 at 14:24

Comments are closed for this article.