css - 如何在浏览器中勾勒 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-a-i-launch-chrome-developer-tools

Answer 1

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

您需要添加此代码

*{border: 1px solid #fff}