firefox - 使用 Firefox 检查 Shadow DOM

Question

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

Answer 1

1. about:config在浏览器地址栏中输入。
2. 设置devtools.inspector.showUserAgentShadowRoots为true // Firefox 76+ 不需要
3. 设置devtools.inspector.showAllAnonymousContent为true （Firefox 76+）

Answer 2

是的，我们在 Firefox 65.0+ DevTools 中添加了 shadow DOM 检查。

正常内容页面中的 Shadow DOM 始终显示，例如

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

要启用查看 Shadow DOM 的内置功能：

1. 转到关于：配置
2. 设置devtools.inspector.showUserAgentShadowRoots为真

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

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