可视化网页布局的工具？

Question

在我自己构建之前，是否有一个工具可以让我快速获得网页的树状结构？基本上所有 Div 和其他布局元素都带有其 ID 和 CLASS 标签的概述，但没有脚本、跨度或其他非布局内容（是的，我知道 css position:absolute 可以将所有内容变成布局元素，但让我们忽略这一点……）。

这是为了获得嵌套、继承 CSS 类等的概述。

编辑：我想打印或复制大纲来对其进行注释，因此它实际上需要删除任何内容/非布局元素。

Answer 1

一个很好的工具是萤火虫。您还可以使用Web开发人员工具栏实现定位元素的“高亮和边框”效果。