查看网页div结构的工具

Question

有没有一个工具可以显示整个页面的div布局结构？

我正在使用Chrome的检查工具，它在滚动时显示单个div，但我希望有一个工具可以查看整个页面的结构，以帮助div布局“调试”。

我已经在谷歌上搜索过，但没有发现任何东西。

谢谢。

Answer 1

打开web工具并创建一个新的CSS规则：

div { outline: 1px solid red !important; }

​

​

如果您厌倦了每次刷新后添加规则，请将此代码作为目标添加到书签中(或将其拖放到书签面板中)：

javascript:{s=document.createElement("style");s.appendChild(document.createTextNode("div {outline: 1px solid red}"));document.head.appendChild(s);void(0)}

Answer 2

这里有一个叫做Div检查器的东西，它将基本检查是否有任何div标记没有正确关闭。但也给了你一张你的结构图。所以这可能会做你想要的。

Answer 3

您可以在Google中使用SnappySnippet扩展