如何概述浏览器中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可访问性标准）。由于用户代理样式表覆盖了页面中的样式，因此我会看到我正在寻找的轮廓。

现在，这只是一个破解，也许已经足够了，但是还有其他工具可以做到这一点，或者是我没有发现的开发工具中的某些东西？

注：我没有找到关于Chrome的渲染菜单选项下的“显示复合层的边界”这个答案，但它不是真的是我在寻找：

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

Answer 1

原来我一直在寻找一个浏览器扩展一个朋友很久以前提到：“网络开发”扩展名。

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

这里是什么样子，概述了块级元素：

这是适用于Chrome，火狐和Opera。显然不适用于Safari。

Answer 2

你不必可以使用开发人员工具[F12]编辑用户代理样式表。

您需要添加该代码

*{border: 1px solid #fff}