48

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

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Angelo Repole
  • 483
  • 1
  • 4
  • 4

2 Answers2

45
  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

AlexMelw
  • 2,406
  • 26
  • 35
  • 4
    this worked for me Jul 3, 2020 - FF 78.0.1 - thanks – Arnaud Leyder Jul 03 '20 at 12:19
  • 4
    Just a reminder that `devtools.inspector.showUserAgentShadowRoots` is not needed in Firefox 76+ so you can just use `devtools.inspector.showAllAnonymousContent`. – Mike Ratcliffe Nov 16 '20 at 12:15
  • thanks for updating, the accept answer needs to follow the same page as well – Caleb Taylor Mar 22 '21 at 20:02
  • 3
    @MikeRatcliffe what about seeing the shadow dom of `input[type="checkbox"]` and how it works? I've toggled the `devtools.inspector.showAllAnonymousContent` and see new elements like `` and ``, but there is no new data around the checkbox input. I'm on FF Dev Edition 99.0b1 – Brian Zelip Mar 10 '22 at 12:11
27

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:

John
  • 1
  • 13
  • 98
  • 177
Mike Ratcliffe
  • 989
  • 6
  • 10
  • 3
    Is there an update on this? Have Mozilla added shadow DOM inspection to Firefox? – evolutionxbox Apr 28 '16 at 11:03
  • 2
    You can switch the dom.webcomponents.enabled pref to true in about:config but I am not sure how stable the support is. – Mike Ratcliffe Dec 08 '16 at 23:25
  • 3
    @MikeRatcliffe Even with enabling the config I cant see the native shadow DOM content (e.g. from video-element). – Teemoh Aug 08 '17 at 22:44
  • 1
    You can track the progress of the Shadow DOM implementation in https://bugzilla.mozilla.org/show_bug.cgi?id=1205323 and the progress of getting the DevTools Inspector to handle it well in https://bugzilla.mozilla.org/show_bug.cgi?id=1053898 – jwatt Jan 16 '18 at 17:56
  • @MikeRatcliffe I presume you work for Mozilla based on your answer. Not sure if your team is aware, but in FF63/Linux, but a shadow DOM that is capable of scrolling (`overflow-y: scroll`) doesn't render the text until user interaction is made. If you're not aware of that, I can attempt to narrow it down to a test case and provide more info. – jhpratt Nov 08 '18 at 03:13
  • @jhpratt If you could produce a test case that would be awesome. – Mike Ratcliffe Nov 08 '18 at 18:18
  • @MikeRatcliffe Sorry for the (incredibly) slow response — I'd mostly forgotten about this until I ran into it again while editing the area. It appears as though it's actually not re-rendering things at all, as `:last-child` still matches initial data, despite other elements being inserted via JS. I haven't yet narrowed this down, but it's component-based to begin with, so I can strip away 90% of the code easily. Do you have a contact so we're not clogging up this answer's comment? I'd certainly like to get a minimal repro and file a bug on Bugzilla. – jhpratt Dec 02 '18 at 05:50
  • 1
    @jhpratt If you could log a bug on Bugzilla and needinfo me then that would be great. – Mike Ratcliffe Dec 02 '18 at 14:09
  • It's March 22nd 2019 and using Firefox 65 neither the DOM Inspector replacement nor the normal Inspector Dev tools show the Shadow DOM at all in spite of the fact that the bug report suggests it landed in Firefox 61. What am I missing? – John Mar 23 '19 at 01:06
  • I believe the current pref you need to set to true in about:config is: devtools.inspector.showUserAgentShadowRoots – Mike Ratcliffe Mar 28 '19 at 11:49
  • @MikeRatcliffe That does nothing in Firefox 63 (the last version anyone can force the tabs BELOW where they belong) and 67 Beta. I've tried loading a video directly to inspect the control as well as inspect form elements and there is zero hint. *Additionally* there is zero documentation where the words Inspector *and* shadow are on the same page on Mozilla's documentation. I was going through *some* of jwatt's DevTools Inspector bug though found nothing relevant. What am I missing? – John May 03 '19 at 04:27
  • @John Here are three prefs that could help you: devtools.inspector.showAllAnonymousContent, devtools.inspector.showUserAgentShadowRoots and devtools.inspector.show_pseudo_elements – Mike Ratcliffe May 04 '19 at 16:41
  • @MikeRatcliffe Nope, nope, nope and altogether as `TRUE` nope. What in the heck is going on here? ︎ Used Firefox 65 since that version *forces* tabs on top and I don't want to screw up Firefox 64's profile. – John May 06 '19 at 00:02
  • 1
    @John Please see my updated answer... hope that helps! – Mike Ratcliffe May 09 '19 at 12:38
  • @MikeRatcliffe Thank you, I updated the answer to include **Firefox 65** as adding the string in Firefox 64 does nothing unless for some odd reason it was semi-supported in older versions? I'm looking forward to Waterfox 68! – John May 09 '19 at 22:53
  • @John Yup, Firefox 65+ – Mike Ratcliffe May 10 '19 at 11:22
  • 8
    Even after enabling this in `about:config`, still doesn't show after inspector reset, or browser restart. Bummer. – skplunkerin Jul 18 '19 at 14:16
  • This setting does not seem to exist in `about:config` in Firefox 75. Come on guys. – Adam Leggett May 06 '20 at 17:11
  • 5
    Setting just devtools.inspector.showUserAgentShadowRoots and devtools.inspector.showAllAnonymousContent works for me in Firefox 77 and I'm able to inspect a ``'s shadow DOM. Now I just wish there were an toggleable button for this in the devtool settings. – silverwind Jun 02 '20 at 20:02
  • @silverwind I'm using Firefox 82 and I don't see `showUserAgentShadowRoots` in `about:config`. – Dai Nov 16 '20 at 07:02
  • 4
    @Dai `devtools.inspector.showUserAgentShadowRoots` was merged into `devtools.inspector.showAllAnonymousContent` in February 2020 so you can skip that pref. – Mike Ratcliffe Nov 16 '20 at 12:10