【发布时间】：2013-10-29 16:42:18
【问题描述】：
有没有办法像使用 Chrome 开发工具一样检查 Firefox 中的 Shadow DOM 元素？
【问题讨论】：
标签： firefox dom shadow-dom
【发布时间】：2013-10-29 16:42:18
【问题描述】：
【讨论】：
-
这对我有用 2020 年 7 月 3 日 - FF 78.0.1 - 谢谢
-
提醒一下，在 Firefox 76+ 中不需要
devtools.inspector.showUserAgentShadowRoots，因此您可以使用devtools.inspector.showAllAnonymousContent。 -
感谢更新，接受的答案也需要跟在同一页面
是的，我们在 Firefox 65.0+ DevTools 中添加了影子 DOM 检查。
普通内容页面中的阴影 DOM 始终显示，例如
默认情况下，不会显示内置浏览器功能的影子 DOM，例如这里是一个视频元素：
启用查看 Shadow DOM 的内置功能：
- 转到 about:config
- 将
devtools.inspector.showUserAgentShadowRoots设置为true
更改此设置后，您需要重新启动 DevTools（或重新启动 Firefox）。
现在可以使用内置元素的 Shadow DOM：
【讨论】：
-
这方面有更新吗？ Mozilla 是否在 Firefox 中添加了 shadow DOM 检查？
-
@MikeRatcliffe 即使启用了配置，我也看不到原生的影子 DOM 内容（例如来自 video-element）。
-
即使在
about:config中启用此功能后，在检查器重置或浏览器重新启动后仍然不显示。无赖。 -
仅设置 devtools.inspector.showUserAgentShadowRoots 和 devtools.inspector.showAllAnonymousContent 在 Firefox 77 中对我有用，我可以检查
<input>的影子 DOM。现在我只希望在 devtool 设置中有一个可切换的按钮。 -
@Dai
devtools.inspector.showUserAgentShadowRoots已于 2020 年 2 月合并到devtools.inspector.showAllAnonymousContent，因此您可以跳过该首选项。