使用Firefox 检查 Shadow DOM

Question

有没有办法在Firefox中检查Shadow DOM元素，就像使用Chrome开发工具一样？

- Angelo Repole

Answer 1

1. 在浏览器地址栏中输入 about:config。
2. 将 devtools.inspector.showUserAgentShadowRoots 设置为 true // Firefox 76+ 可不需要
3. 将 devtools.inspector.showAllAnonymousContent 设置为 true (仅适用于Firefox 76+)

- AlexMelw

---

这对我有用。2020年7月3日 - 火狐浏览器版本78.0.1 - 感谢。 - Arnaud Leyder

提醒一下，在Firefox 76+中不需要使用devtools.inspector.showUserAgentShadowRoots，您可以直接使用devtools.inspector.showAllAnonymousContent。 - Mike Ratcliffe

感谢您更新，采纳答案也需要在同一页上进行。 - Caleb Taylor

@MikeRatcliffe，你看过input[type="checkbox"]的影子DOM以及它是如何工作的吗？我已经切换了devtools.inspector.showAllAnonymousContent并看到了新元素，例如<scrollbar>和<scrollcorner>，但是在复选框输入周围没有新数据。我使用的是FF Dev Edition 99.0b1。 - Brian Zelip

Answer 2

是的，我们已经在Firefox 65.0+ DevTools中添加了Shadow DOM检查功能。

在普通内容页面中，Shadow DOM始终显示，例如：

默认情况下，不会显示内置浏览器功能的Shadow DOM，例如这里的视频元素：

要启用内置特性的Shadow DOM查看：

1. 转到about:config
2. 将devtools.inspector.showUserAgentShadowRoots设置为true

更改此设置后，您需要重新启动DevTools（或重新启动Firefox）。

现在内置元素的Shadow DOM将可用：

- Mike Ratcliffe

---

最近有更新吗？Mozilla是否已将Shadow DOM检查功能添加到Firefox中？ - evolutionxbox

即使我启用了配置，也无法看到本地阴影 DOM 内容（例如来自 video 元素的内容）。 - Teemoh

即使在“about:config”中启用了此选项，在检查器重置或浏览器重新启动后仍未显示。 很遗憾。 - skplunkerin

在Firefox 77中，仅通过设置devtools.inspector.showUserAgentShadowRoots和devtools.inspector.showAllAnonymousContent就可以检查<input>元素的影子DOM。现在，我希望在开发工具设置中有一个可切换的按钮来实现这一点。请注意，翻译保持原意，不加解释或其他内容。 - silverwind

@Dai devtools.inspector.showUserAgentShadowRoots 在2020年2月已经合并到 devtools.inspector.showAllAnonymousContent 中，因此你可以跳过这个设置项。 - Mike Ratcliffe