使用Firefox检查影子dom

Question

有没有办法在Firefox中检查影子dom元素,就像使用Chrome开发工具一样？

Answer 1

只是提醒一下，Firefox 76+ 中不需要 `devtools.inspector.showUserAgentShadowRoots`，因此您可以只使用 `devtools.inspector.showAllAnonymousContent`。 (3认同)
@MikeRatcliffe 看看 `input[type="checkbox"]` 的影子 dom 怎么样？它是如何工作的？我已经切换了“devtools.inspector.showAllAnonymousContent”并看到了“<scrollbar>”和“<scrollcorner>”等新元素，但复选框输入周围没有新数据。我使用的是 FF 开发版 99.0b1 (3认同)
这对我有用 2020 年 7 月 3 日 - FF 78.0.1 - 谢谢 (2认同)

Answer 2

我们还没有向Firefox DevTools添加shadow DOM检查(我们计划添加它).您可以使用DOM检查器:

现在,您可以使用另一个Inspect上下文菜单条目来检查shadow DOM.

在Firefox开发者工具中实现这个有一个错误...任何补丁/想法将不胜感激:https: //bugzil.la/1053898

即使在“about:config”中启用此功能后，检查器重置或浏览器重新启动后仍然不会显示。真糟糕。 (6认同)
这有更新吗？让Mozilla为Firefox添加了影子DOM检查吗？ (3认同)
在 Firefox 77 中，仅设置 devtools.inspector.showUserAgentShadowRoots 和 devtools.inspector.showAllAnonymousContent 对我有用，并且我能够检查 `<input>` 的影子 DOM。现在我只是希望在开发工具设置中有一个可切换的按钮。 (3认同)
您可以在about:config中将dom.webcomponents.enabled pref切换为true,但我不确定支持的稳定性. (2认同)
@MikeRatcliffe即使启用了配置，我也看不到本地阴影DOM内容（例如，来自video-element）。 (2认同)
@Dai `devtools.inspector.showUserAgentShadowRoots` 已于 2020 年 2 月合并到 `devtools.inspector.showAllAnonymousContent` 中，因此您可以跳过该首选项。 (2认同)