有没有工具来分析带有css盒模型的网页？

Question

网页每天都变得越来越漂亮，而结构的基础也是一样的 那就是css box模型 所以我想知道是否有任何工具来分析带有css框的页面。那就是：
1.输入页面（网址）;
2.输出页面的框结构（png）;

例如，输出可能是这样的：

有了这个，我们可以在这个网页上做更好的审查或返工。对吗？
如果你能告诉我你对此的了解，我将不胜感激。

Answer 1

Firefox浏览器提供了一个3D工具，用于详细检查网页。这是一个非常有趣的工具。你可以这样检查一下。

在firefox中打开网页，然后右键单击页面上的任意位置。从菜单中选择inspect element(Q)。它将在页面底部带一个类似于firebug窗口的新窗口。您可以在右侧找到3d视图按钮。点击它并拖动您的网页，然后它会根据您的意愿旋转。

以下是apple.com网站的示例截图

http://i.stack.imgur.com/2TuG6.jpg