CODEWITHSUNDEEP
firefoxdomshadow-dom
Angelo Repole
Angelo Repole

Reputation: 573

Inspect Shadow DOM with Firefox

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

Upvotes: 57

Views: 27131

Answers (2)

AlexMelw
AlexMelw

Reputation: 2624

  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+)

enter image description here

Upvotes: 58

Mike Ratcliffe
Mike Ratcliffe

Reputation: 1025

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:

Upvotes: 30

Related Questions