Css 如何在浏览器中概述HTML页面的元素以查看框的布局？是否修改用户代理样式表？

在Chrome devtools、Firefox devtools、Safari、Opera等中，如果我检查一个元素，当我在源代码面板中将鼠标悬停在该元素的代码上时，我可以看到它的边界框清晰地勾勒出来。太好了。但是如果我想看看页面上的所有（或大部分）元素是如何布局的呢？例如，也许我想看看这样的东西：

在Firefox“样式编辑器”中，我添加了以下样式：

div { border: 1px dotted pink }
p   { border: 1px solid green }
a   { border: 2px solid yellow }
li  { border: 1px dashed cyan }
img { border: 1px solid purple}

（Chrome无法做到这一点，因为它不支持UAAG2.0Web标准的可访问性）。因为用户代理样式表覆盖了页面中的样式，所以我看到了我想要的轮廓

现在，这只是一个hack，也许已经足够了，但是是否还有其他工具可以做到这一点，或者在devtools中我没有找到的东西

注意：我确实在Chrome的“渲染”菜单选项下找到了关于“显示合成层边界”的答案，但这并不是我真正想要的：

---

您不必编辑用户代理样式表，因为您可以使用开发人员工具[F12]进行编辑

您需要添加此代码

*{border: 1px solid #fff}

---

原来我在寻找一个朋友很久以前提到的浏览器扩展：“Web开发者”扩展

下面是概述块级元素的外观：

---

它可用于Chrome、Firefox和Opera。显然不适用于Safari。

如果您使用的是Firefox Quantum：

马修巴开放式杀虫剂

概述页面上的每个元素，以帮助您将其可视化 维度并克服那些恼人的CSS布局问题。要求 零权限和完全开源

我用这种方式

*:hover { 
   outline:1px blue solid;
 } 

---

这看起来像我做的，除了一个风格规则，而不是我的五个。您在开发人员工具中的何处添加此功能？在“样式编辑器”下，就像我在Firefox上做的那样？这也可以在Chrome中实现吗？非常好，谢谢！请注意，但不幸的是，不暴露/显示背景图像/元素边界，有可能吗？Mozilla Firefox 52.5.3除此之外，还有一个更轻的功能：还有一个杀虫剂CSS可以与Firefox配合使用：啊，有一个Firefox杀虫剂插件（尽管在撰写本文时与Firefox Quantum不兼容）。另一个我刚刚听说的：超光速子x射线哇！这很酷，超级简单！例如，在chrome中，我只需点击页面上样式面板右上角的加号图标，添加样式规则，我就可以移动鼠标查看每个小元素的轮廓。棒 极 了在Firefox中添加样式规则几乎是一样的，在“规则视图”中按加号--