使用 Chrome 开发工具，我如何一次查看/检查所有元素以查看页面布局？（附示例）答案

【问题标题】：With Chrome Dev Tools, how do I view / inspect all the elements at once to see the page layout? (Example attached)使用 Chrome 开发工具，我如何一次查看/检查所有元素以查看页面布局？（附示例）
【发布时间】：2017-03-11 15:09:09
【问题描述】：

使用 Chrome 开发工具，我如何一次查看/检查所有元素以查看页面布局？（附示例）

谢谢！！！

'View All' Chrome Dev Tools

更多信息：我昨天自己截了屏，但是在选择了其他东西之后，我永远无法弄清楚如何复制这个视图。

我发现了这个类似的问题： Is it possible to select multiple elements in the Chrome Developer Tools Elements panel?

给出的答案是“不”，但考虑到我昨天自己截取了这张截图……我知道有办法……谢谢！！！

【问题讨论】：

截图从何而来？
我不知道这是否可能，但这是我用来查看所有元素框的一个技巧：在 chrome 开发工具中，单击右上角的 + 符号以创建一个新的 CSS 规则。将选择器更改为* 以选择所有元素。添加这个 CSS 声明：outline: 1px solid purple。这将为页面上的所有元素添加一个紫色轮廓。
我昨天自己拍了这张截图......但不确定我选择了什么来创建它......你的'轮廓：1px纯紫色'......它给出了一个很好的观点...... . 虽然我希望我有一种简单的方法来获得像所附视图一样的视图......看起来这对于快速查看任何页面的情况非常有用......
我不知道该怎么做。如果你知道怎么做，你应该在这里添加一个答案：stackoverflow.com/questions/30489636/…
我知道..我发现了上一个问题...但是考虑到我在当天早些时候自己拍摄了这张截图，我知道可以做到。不知何故....将继续调查....

标签： html css google-chrome

【解决方案1】：

Ankith 正确回答了这个问题：

为通用选择器定义一个规则 * 并将鼠标悬停在 DevTools 的样式面板。

Screenshot of Answer

为了复制这一点，Kodos 拥有了大部分：

在chrome开发工具中，点击右上角的+号创建一个新的 CSS 规则。将选择器更改为 * 以选择所有元素

（并将鼠标悬停在此选择器上）

谢谢！！！

【讨论】：