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

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

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

![](https://i.stack.imgur.com/ztoEH.png)

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

![](https://i.stack.imgur.com/6amyf.png)

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

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

![](https://i.stack.imgur.com/AP7wR.png)

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

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

![](https://i.stack.imgur.com/W9eGW.png)
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](https://i.stack.imgur.com/zwGJh.png)](https://i.stack.imgur.com/zwGJh.png)