DOM Treemap

1.1.1

下载:

点击下载谷歌商店

教程:

Chrome 浏览器插件下载&安装教程（图文讲解）

截图:

简介:

帮助您探索文档树中 DOM 节点的分布。

在 Google Lighthouse 审计抱怨 DOM 尺寸过大之后，您有没有想过大多数 DOM 节点埋在文档的哪个角落？ Lighthouse 和 Devtools 本身都不能帮助找到这些区域。

这就是 DOM Treemap 的用途。它扩展了您的 Devtools Elements 选项卡，其中包含一个额外的窗格，该窗格可视化当前检查的 DOM 元素的节点后代的分布。这使您可以轻松地向下钻取 DOM 并找到所有隐藏的节点重部分。

最重要的是，所有这些 BEM 爱好者都有一个额外的选项卡，它通过另一个树形图可视化不同 BEM 组件的平均节点密集程度。