关于 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...

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

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

(Chrome 不能这样做，因为它不支持 UAAG 2.0 网络无障碍标准)。由于用户代理样式表覆盖了页面中的样式，我看到了我正在寻找的那种轮廓。

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

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

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

我就是这样用的

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

您需要添加此代码

原来我一直在寻找一个朋友很久以前提到的浏览器扩展："Web Developer"扩展。

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

下面是块级元素的概述：

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

如果您使用的是 Firefox Quantum：

https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search

Open Pesticide by MatthewBaa

Outlines each element on the page to help you visualize their
dimensions and overcome those annoying CSS layout issues. Requires
zero permissions and completely open source.