Inspect Shadow DOM with Firefox

Question

Is there a way to inspect Shadow DOM elements in Firefox like you can do with the Chrome dev tools?

Answer 1

1. Type about:config in the browser address bar.
2. Set devtools.inspector.showUserAgentShadowRoots to true // not needed for Firefox 76+
3. Set devtools.inspector.showAllAnonymousContent to true (Firefox 76+)

Answer 2

Yes, we have added shadow DOM inspection to Firefox 65.0+ DevTools.

Shadow DOM in normal content pages is always displayed e.g.

By default shadow DOM for built in browser features is not displayed e.g here is a video element:

To enable viewing of the Shadow DOM for built in features:

1. Go to about:config
2. Set devtools.inspector.showUserAgentShadowRoots to true

After changing this setting you need to restart DevTools (or restart Firefox).

Now the Shadow DOM for built-in elements will be available: