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?

How do I inspect a DOM in Firefox?

Opening the DOM Property Viewer Once enabled, you can open the DOM Property Viewer by selecting “DOM” from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Ctrl + Shift + W keyboard shortcut.

Where can I find shadow DOM element?

To access these Shadow DOM elements, we need to use JavascriptExecutor executeScript() function. If you look at the DOM structure, every element that has ShadowDOM also has a shadowRoot property which describes the underlying elements. Before looking at the example, first let see about DOM and Shadow Dom.

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

enter image description here