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 等中，如果我检查一个元素，当我将鼠标悬停在源面板中该元素的代码上时，我可以看到它的边界框轮廓清晰。那太棒了。但是，如果我想查看页面上所有(或大部分)元素的布局怎么办？例如，也许我希望看到这样的内容：
|
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; } |
您不必像使用开发人员工具 [F12] 那样编辑用户代理样式表。
您需要添加此代码
|
1
|
*{border: 1px solid #fff}
|
原来我一直在寻找一个朋友很久以前提到的浏览器扩展：”Web Developer”扩展。
http://chrispederick.com/work/web-developer/
下面是块级元素的概述：
