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

firefox firebug language-features firefox-developer-tools

21,794

Solution 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.

Solution 2

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.

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions

21,794

janpio

digital resident

Updated on February 28, 2020

Comments

janpio about 4 years
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?
- llamerr about 10 years
  
  I'm reading my rss feed for Mozilla Hacks, and looks like right now native tools starting to become better than Firebug. It would be nice if someone who working with them can confirm that for 2014. e.g. - hacks.mozilla.org/2014/02/…
- unode almost 10 years
  
  Given the current relatively fast release cycle of Firefox, wouldn't it be viable to simply combine efforts? I was always puzzled on why Firebug didn't go the same way as say pdf.js back when the Firefox DevTools were primitive... With the newer DevTools as of Firefox 29, I can see myself jumping between Firebug and DevTools for some tasks that can be better performed in one or the other.
Simon Lindholm over 10 years

That list is only about startup performance, which improved greatly in 1.10 when Firebug was made delay-load. Still, Firefox devtools do care more about performance during use, in part exactly because they want to avoid being tarnished by the general view of Firebug as "slow". Whether that adds up to being more usable, I don't know.
Aleks-Daniel Jakimenko-A. over 9 years

It seems like a lot from this list is not relevant today.
malisokan over 9 years

15.11.2014 - FF 33.0: There have been a lot of improvements to the native inspect tool: Filters are available for network tab; Lots of really cool and useful features: 3D View, Responsive Design mode, Color grabber, Used font + font preview; Huge performance advantage compared to Firebug; Cookies can be viewed via Firefox -> Tools -> Page Info -> Security. Hopefully I can replace firebug with the native tools someday, because I think its impossible for the firebug addon to get the high performance of the native tools.
gabaum10 about 9 years

How does FireBug 3.0 compare to the native tools? It looks like they basically just skinned the native tools and I can't find any comparisons between Firebug 3.0a9 and the native dev tools in FF 36.0.1?
user about 9 years

This will still be relevant, they are not merging, the new Firebug will be built on top of the DevTools so it doesn't duplicate any existing features, but it will still have some unique ones.
Paul Sweatte about 9 years

@user Honza, one of the main developers, had this to say on the mozilla hacks blog post linked above: One of our goals is to bring Firebug UX into native devtools, so yes, features are mixing to devtools.
user over 8 years

"Firebug 3 is not another developer tool, it is rather a thin layer built on top of DevTools, providing a new theme that makes DevTools look like Firebug. There are also a few additional features, that we’ll port into DevTools step by step." (source) So I believe you are right, eventually it'll be merged into DevTools completely.
webdev-dan over 7 years

firebug got integrated into firefox recently (11.2016) ...and all these simple features / small pretty improvements like "single click to edit" are gone ..all the good things gone ....same as the productivity of firebug users :( ...generaly UI of the firebug was better and faster to work with
Sebastian Zartner about 7 years

FYI, copying the XPath of an element is requested in bug 987877, copying the CSS path is possible since Firefox 53.0 via right-click on an element > Copy > CSS Path (see bug 1323700).