Menu
Is there a way to inspect Shadow DOM elements in Firefox like you can do with the Chrome dev tools?
377
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.
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.
about:config in the browser address bar.devtools.inspector.showUserAgentShadowRoots to true // not needed for Firefox 76+ devtools.inspector.showAllAnonymousContent to true (Firefox 76+) 
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
