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

How can I outline the elements of an HTML page in the browser to see the layout of the boxes? Modify the user agent style sheet?

在 Chrome devtools、Firefox devtools、Safari、Opera 等中，如果我检查一个元素，当我将鼠标悬停在源面板中该元素的代码上时，我可以看到它的边界框轮廓清晰。那太棒了。但是，如果我想查看页面上所有(或大部分)元素的布局怎么办？例如，也许我希望看到这样的内容：

enter

1
2
3
4
5

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 网络无障碍标准)。由于用户代理样式表覆盖了页面中的样式，我看到了我正在寻找的那种轮廓。

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

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

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

我就是这样用的

1
2
3

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