在 Chrome 中查看地形信息答案

【问题标题】：Seeing topographical information in Chrome在 Chrome 中查看地形信息
【发布时间】：2014-05-18 22:42:47
【问题描述】：

Firefox Web 开发人员的工具栏在“信息”下有一个选项，可以查看有关页面的地形信息：里面有什么。有什么办法可以通过 Chrome 的开发工具看到这一点？

我在 Chrome 上安装了 Web 开发人员的工具栏，但看不到任何打开工具栏的方法。然后我从 2013 年发现了一些关于 Google 禁用工具栏的信息。

那么，有没有办法在 Chrome 中查看哪些元素包含在哪些元素中？

我使用的是 Chrome 34.0。

谢谢

【问题讨论】：

不清楚您所说的“地形信息”是什么意思。您需要正确的 DOM 结构（作为树）还是它的图形表示（页面布局）？
我想这两种方法都可以。我希望能够一目了然，例如，DIV A 和 B 是 DIV C 内部的兄弟，而 DIV C 在 DIV D 内部。
@AlexanderPavlov，Firefox 提供了 DOM 层次结构的 3D 视图，其中子元素分层显示在其父元素之上。渲染的时候是根据页面布局复杂度的拓扑图。

标签： google-chrome google-chrome-devtools inspector

【解决方案1】：

Pendule Chrome 扩展程序具有 Topographic View，其工作方式与 Firefox 类似。

关于 Chrome 中的 Web Developer 扩展，安装后，您可以从 chrome://extensions/ 启用它，它会在屏幕右上角显示一个齿轮图标按钮。

【讨论】：

【解决方案2】：

根据 William Price 的评论，曾经在 FireFox 中被称为“Tilt”的意思是。我们考虑做同样的事情，但由于无法正确显示重叠元素的内容（IIRC，Tilt 也有同样的问题），我们放弃了这个想法。相反，我们有 Layers 面板，它显示合成层（参见 Layer composition in the chrome dev tools）。

【讨论】：