What unique features does Firebug have that are not built-in to Firefox?

Question

I just cleaned my Firefox addons and wondered:

• Which features does Firebug have that make it unique?

• Which features are available in both Fire

Answer 1

Firefox's native developer tools have come a long way since this question was written. The differences have mainly reduced to the following points:

• Can't stop the script execution on DOM mutations, XHRs, or cookie changes.
• XPaths can't be copied.
• Missing an events side panel in the Inspector (though events are displayed within the DOM structure).
• Missing a DOM side panel in the Inspector.
• No live preview while editing HTML.
• Missing autocompletion for non-enumerable properties in the command line.
• Can't search within multiple files in Style Editor.
• No multi-line command line in the Web Console (though they have Scratchpad and a "smart-multi-line" command line)
• No toolbar buttons to toggle the tools or the Inspector.
• Can't search within responses of network requests.
• Missing autocompletion for several CSS properties.
• Missing several command line commands.
• Can't add cookies, just edit existing ones.
• No always-on mode and activation per domain (instead of per tab).

There are more things missing, which are tracked in a bug report filed for all the gaps between Firebug and the Firefox DevTools.

Firebug integration

Firebug is now built on top of the native developer tools. Since Firefox 48 there's also a Firebug theme that looks like the Firebug extension, letting you feel at home if you're used to Firebug. Once multi-process Firefox is enabled, pressing F12 or clicking the Firebug button opens the Firefox DevTools and with the Firebug theme.

There's also a migration guide explaining the differences between Firebug and the Firefox DevTools.

Answer 2

This will be irrelevant soon, as Firebug and the native developer tools are merging:

Firebug 2 doesn’t work in multi-process browsers (i.e. e10s) and converting it is too complex, it will stop working when e10s is activated in Firefox.

We want to be ready when Firebug 2 stops working and we have come up with the following plan.

Integrate all Firebug 3 features into Firefox built-in tools and forward all Firebug users to it.

Replace Firebug 2 by releasing Firebug 3 (on AMO) only if we have to deliver any critical features missing in Firefox developer tools in an extension.

We are currently working on porting XHR Inspector (bug 1211525), DOM panel (bug 1201475) and Firebug theme (bug 1244054).

The main goal for the next release of Firebug the will be to integrate it into the Firefox built-in DevTools. Besides this the Firebug Working Group plans some new features to extend the DevTools with new functionality.

Firebug 3.0 alpha (aka Firebug.next) is currently compatible with Firefox 35 – 36 and will support upcoming multiprocess (as well as non-multiprocess) browsers.

Firebug 3.0 (also known as Firebug.next) represents the next Firebug generation built on top of the native Firefox developer tools.

If you install Firebug 2 into a multiprocess (e10s) enabled browser, you’ll be prompted to upgrade to Firebug 3 or switch off the multiprocess support.

Mozilla postponed the release of Electrolysis several times already. The current plan is to release multi-process Firefox to the stable channel on April 19, 2016 when Firefox 46 is released to the stable channel.

This is a projected release date only however and it is possible that Electrolysis will be delayed further.

One interesting idea that Mozilla has to make the release less painful for users of the browser is to enable Electrolysis only in versions of Firefox without add-ons, and in versions of Firefox where only compatible add-ons are installed in.

We have been working to unify Firefox Developer tools and Firebug for some time. From Firefox 49, we’ll be shipping Firebug.next built-in.

If you use the built-in Firefox Developer Tools, rather than Firebug, then you may like the DOM Panel and Firebug Theme that we’ve added in this merge.

In addition we’ve ported some common Firebug extensions (PixelPerfect, FireQuery and HARExportTrigger formerly NetExport). And while we’re at it, you might like our new WebSocket Monitor extension.

As part of porting Firebug features to the built-in tools, we’re also porting the Firebug theme, giving Firebug users a more familiar environment to work with.

This theme is hot, hot, hot! Say hi to the Firebug theme for Developer Tools

Mozilla today launched Firefox 48 for Windows, Mac, Linux, and Android. The browser has gained multi-processor support (finally), enhanced protection against harmful downloads, and media improvements on Android. Support for old OS X versions and Android Gingerbread has been dropped.

In Firefox 48, Mozilla is slowly enabling multi-process support, starting with 1 percent of users, and ramping up to nearly half of the Firefox Release channel. To check if you’re in the Electrolysis group, type “about:support” into the URL bar and check to see if it says “1/1 (Enabled by default)” under the Multiprocess Windows line item.

References

• Firebug lives on in Firefox DevTools

• Merging Firebug into the built-in Firefox Developer Tools

• Mozilla Launches Multi-Process Test in Firefox Beta

• Firebug Roadmap

• Firebug 3 & Multiprocess Firefox (e10s)

• Firebug.next Github repo

• Unifying Firebug & Firefox DevTools

• Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

• Firebug 3.0 Project page

• Remote Debugging: Debugging Firefox Desktop

• Firefox 48 Release Notes: Developer Tools

• Firefox 48 arrives with multi-process support, drops old OS X versions and Android Gingerbread

Answer 3

There are lots of small features that Firebug has that the built-in tools don't. Playing around with the UI, this is what comes to mind, but I'm sure there are more:

• closure inspection abilities, like the someFunction.%closureVar command line syntax
• right-click to play with any value in the command line
• single-click to edit
• highlighting elements on hover
• command line APIs, like include and getEventListeners
• ability to show UA styles
• "Add rule" from within the Style panel
• a CSS panel that is usable for minified CSS
• when an element contains only text, the HTML panel displays the text inline
• XHR logging in the Console with JSON prettification (and which doesn't open a popup)
• "Break on attribute change/subtree change/node removal" in the HTML panel
• "Break on mutate", "Break on next", "Break on property change", "Break on cookie change"
• a whole Cookies panel
• stack traces in the Console panel
• editing and pasting HTML
• free-text search within most panels
• lots of options to twiddle if you need to
• event logging

There are also, of course, subjective aspects to this. For instance, I personally like Firebug's UI and appearance more than the blackness of the devtools, and previous familiarity with a tool is always important.

Answer 4

Unique features that Firebug has, but Firefox's built-in inspector does not have, include:

• Copy XPath
• Copy Minimal XPath
• Copy CSS Path

Unique features that Firefox's built-in inspector has, but Firebug does not have, include:

• Copy Unique Selector

Answer 5

One advantage of the native dev tools over current firebug version is that it has sourcemaps, where firebug does not.

Answer 6

Seems like someone over there saw my question here ;)

https://hacks.mozilla.org/2013/10/firefox-developer-tools-and-firebug/

Problem is, that also doesn't answer very much. But it implies, that Firebug right now doesn't have much to differentiate itself and so is looking for way to change that.