What unique features do the Firefox DevTools have that the Chrome DevTools don't have and vice versa?

Question

Now that Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.

Therefore I am wondering, which features do the Firefox DevTools have that are not offered by the Chrome DevTools?

Can you please give me an objective answer to this question?

Answer 1

Firefox DevTools

As far as I can see, the Firefox Developer Tools (as of Firefox 54.0.1) have a lot of niche features over the Chrome Developer Tools (as of Chrome 59.0), i.e. very specific tools that are presumably used by a rather small group of people. Besides those special tools, the Firefox Developer Tools also have several core features the Chrome Developer Tools are missing.

The different features are:

• Canvas Editor
• Web Audio Editor
• Shader Editor
• Developer Toolbar (GCLI) (will be removed)
• Scratchpad
• DOM Inspector
• Page rulers
• Screenshot tools
• Font Inspector
• Grid Inspector
• Measure portions of the page
• Firebug theme (got removed in Firefox 61)
• Switch between iframes
• Tools to debug the browser UI
• Security info for individual network requests
• Network caching comparison

Chrome DevTools

The Chrome DevTools (as of Chrome 59.0) have more features regarding the standard tools and they provide other niche tools.

Those features include:

• DOM and XHR breakpoints
• Event listeners panel
• Properties panel
• Security Inspector
• Audits
• Touch simulation and pixel density in device emulation
• Live editing in Sources panel
• Workspaces
• Network request blocking
• Advanced memory tooling
• Manifest, service worker & application cache inspector
• Scroll performance issues highlighter
• Frames per second meter
• CSS Media emulation
• Global file search
• Code coverage analyser
• Geolocation, orientation, and touch emulation
• Local overriding of CSS styles

Also, they differ in many smaller features and in their settings.

Answer 2

From the docs:

DOM Property Viewer Inspect the page's DOM properties, functions, etc. (You'll notice properties of the object are not usually listed in console in Chrome, you would never know that body.innerHTML existed, looking at "document.body" in the console.)

Developer Toolbar A command-line interface for the developer tools.

Shader Editor View and edit the vertex and fragment shaders used by WebGL.

Web Audio Editor Examine the graph of audio nodes in an audio context, and modify their parameters.

Taking screenshots Take a screenshot of the entire page or of a single element.

Some extra tools in the settings panel:

• Measure a portion of the page

• Scratchpad

The network panel shows the stack trace of the cause of each network request, in Chrome you have to go through console log of network requests and find the one and expand it. Also, you can see the actual preview (in preview tab) of a xhr response if it happens to be html returned.

And perhaps the most useful, the inspector shows (ev) beside every element with an event listener on it, with direct listing of everything that adds event listener to it. (nicer than Chrome's event tab listing to the right.)