查看网页 div 结构的工具

Question

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

我正在使用 Chrome 的检查工具，它会在您滚动浏览时显示在 dividual divs 中，但我希望有一个工具可以将查看整个页面的结构以帮助 div 布局 "debugging."

我已经用谷歌搜索了一般和在这里，但没有找到任何东西。

谢谢。

Answer 1

您可以在 Google Chrome

中使用 SnappySnippet 扩展

Answer 2

打开网络工具并创建一个新的 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 3

有个东西叫 Div Checker 这将基本上检查是否有任何 div 标签没有正确关闭。但也给你一张你的结构图。所以这可能会满足您的需求。