用于查看网页的div结构的工具

Question

那里有工具可以显示整个页面的div布局结构吗？

我正在使用Chrome的检查工具，当您滚动浏览时会显示各个div，但我希望那里有一个工具可以查看整个页面＆＃39 ; s结构，以帮助div布局＆＃34;调试。＆＃34;

我一般都在google上搜索过，并且找不到任何东西。

感谢。

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

您可以在Google Chrome中使用SnappySnippet扩展程序

Answer 3

有一个名为Div Checker的东西 这将基本检查是否有任何div标签未正确关闭。但是也会给你一张你的结构图。所以这可能会做你想要的。