What unique features does Firebug have that are no

Question

I just cleaned my Firefox addons and wondered:

• Which features does Firebug have that make it unique?

• Which features are available in both Firebug and the Firefox Developer Tools?

Answer 1

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 2

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.

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

I think the biggest advantage still --after the implementation of Network Panel & Timeline functionality-- is the availability of various Firebug Extensions, like for example YSlow, Page Speed, FirePython and so on.

In the end it's probably more a choice based on your personal preferences, to come up with a weapon of choice that brings you most convenience and speed.

An interesting detail on this decision is, that Firebug once was one of the plugins that had most significant negative performance impact on Firefox. I don't know about a current study on that, especially if built in dev tools are acting better performance-wise than Firebug.

Answer 5

The console command line in large, editor mode allows running code against the current context. The new Scratchpad does not see the current breakpoint scope. This is a terrible loss.

Answer 6

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.