使用Firefox检查shadow dom [英] Inspect shadow dom with Firefox

问题描述

是否可以像使用Chrome开发工具那样检查Firefox中的影子dom元素？

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

推荐答案

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

Yes, we have added shadow DOM inspection to Firefox 65.0+ DevTools.

Shadow DOM，例如

Shadow DOM in normal content pages is always displayed e.g.

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

By default shadow DOM for built in browser features is not displayed e.g here is a video element:

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

To enable viewing of the Shadow DOM for built in features:

1. 转到about：config


2. 设置 devtools.inspector.showUserAgentShadowRoots 为true

1. Go to about:config
2. Set devtools.inspector.showUserAgentShadowRoots to true

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

After changing this setting you need to restart DevTools (or restart Firefox).

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

Now the Shadow DOM for built-in elements will be available:

这篇关于使用Firefox检查shadow dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！