且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用Firefox检查shadow dom

更新时间:2023-02-15 14:31:51

是的,我们已经在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: