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

Question

在 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 无法执行此操作，因为它不支持 UAAG 2.0 Web 可访问性标准）。由于用户代理样式表覆盖了页面中的样式，我看到了我正在寻找的轮廓类型。

现在这只是一个 hack，也许就足够了，但是还有其他工具可以做到这一点，或者我没有在 devtools 中找到什么？

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

https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-ai-launch-chrome-developer-tools

Answer 1

您不必像使用开发人员工具 [F12] 那样编辑用户代理样式表。

您需要添加此代码

*{border: 1px solid #fff}

Answer 2

今年，即 2022 年，出现了另一个有用的概念：

* {
  background: rgb(0 100 0 / 0.1) !important;
}

这个想法是每个元素都会获得一定量的颜色，以便我们可以直观地确定有多少重叠空间，因为多个重叠会变得更暗。它看起来像这样：

该技术显示卡 1 标签的右侧有多余的空间h2。

上图由 Kevin Powell 在他的 codepen 上创作。

他在一个非常有说服力的 YouTube 视频（名为CSS 的 console.log）中描述了整个概念，该视频时长不到一分钟。

Answer 3

我用这种方式

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

Answer 4

原来我正在寻找朋友很久以前提到过的浏览器扩展：“Web Developer”扩展。

http://chrispederick.com/work/web-developer/

下面是块级元素的概述：

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