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 等中，如果我检查一个元素，当我将鼠标悬停在源面板中该元素的代码上时，我可以看到它的边界框轮廓清晰。那太棒了。但是，如果我想查看页面上所有(或大部分)元素的布局怎么办？例如，也许我希望看到这样的内容：
在 Firefox 的” 样式编辑器”中，我添加了以下样式：<=”” p=”” class=”box-hide box-show”>
|
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; } |
- 哇！这很酷而且超级简单！例如，在 chrome 中，我只需单击此页面上样式面板右上角的加号图标，添加该样式规则，然后我可以移动鼠标以查看每个小元素的轮廓。高超！
- 在 Firefox 中添加样式规则几乎相同，在”规则视图”中按加号 — developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to??/…
您不必像使用开发人员工具 [F12] 那样编辑用户代理样式表。
您需要添加此代码
|
1
|
*{border: 1px solid #fff}
|
- 这看起来就像我所做的，除了一个样式规则而不是我的五个。您在开发人员工具中的哪个位置添加了这个？在”样式编辑器”下，就像我为 Firefox 所做的那样？这也可以在 Chrome 中完成吗？
- 工作正常，谢谢！附言但不幸的是，不暴露/显示背景图像/元素边界，这可能吗？火狐 52.5.3
原来我一直在寻找一个朋友很久以前提到的浏览器扩展：”Web Developer”扩展。
http://chrispederick.com/work/web-developer/
下面是块级元素的概述：
它适用于 Chrome、Firefox 和 Opera。显然不适用于 Safari。
- 还有一种更轻巧的方法：Chrome 农药
- 还有一个适用于 Firefox 的 Pesticide CSS：github.com/mrmrs/pesticide
- 啊，有一个 Firefox Pesticide 插件(尽管在撰写本文时与 Firefox Quantum 不兼容)。 addons.mozilla.org/en-US/firefox/addon/pesticide
- 我刚刚了解到的另一个：tachyons-x-ray chrome.google.com/webstore/detail/tachyons-x-ray/…
如果您使用的是 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.
来源：https://www.codenong.com/41355372/
