如何在浏览器中列出 HTML 页面的元素以查看框的布局？修改用户代理样式sheet？

Question

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

在 Firefox "Style Editor" 我添加了这些样式：

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 网络可访问性标准）。由于用户代理样式 sheet 覆盖了页面中的样式，我看到了我正在寻找的那种轮廓。

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

注意：我确实在 Chrome 中的“渲染”菜单选项下找到了关于 "Show composited layer borders" 的答案，但这并不是我真正要找的：

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

Answer 1

您不必编辑用户代理样式 sheet，因为您可以使用开发者工具 [F12]。

您需要添加此代码

*{border: 1px solid #fff}

Answer 2

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

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

这是概述块级元素的样子：

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

Answer 3

如果您使用的是 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.

Answer 4

我是这样用的

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