Inspect Shadow DOM with Firefox

firefox dom shadow-dom
Angelo Repole picture Angelo Repole · Oct 21, 2013 · Viewed 12.9k times · Source

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

Answer

Mike Ratcliffe picture Mike Ratcliffe · Oct 22, 2013

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:

Related questions

How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)

Read More
Difference between DOM parentNode and parentElement

Can somebody in explain me in as simple as possible terms, what is the difference between classical DOM parentNode and newly introduced in Firefox 9 parentElement

Read More
Does document.body.innerHTML = "" clear the web page?

When I refresh the page below in FF 3.0, I expected the web page to clear but it didn't. Why doesn't document.body.innerHTML = "" clear the page? UPDATE: I am trying to clear the previous screen during a refresh while the …

Read More