Question

为了更好地编程和开发我的 Javascript 和 HTML5 技能，我想想象一下各种HTML商品的实际边界框。这也有助于调试以及最佳实践的最终开发。

Android设备有一个方便的功能，通过开发人员设置，可以打开和关闭各种布局和小部件的显式绘制边界矩形。

除了浏览Firefox源代码外，是否知道如何为网络获得类似的结果？任何浏览器都没问题。

enter image description here

Answer 1

在Firefox 24上，您可以使用Firebug执行类似的每页操作。在Firebug的CSS窗格中，右键单击并选择“新建规则”。规则是：

html * { border: 1px solid #00f !important }

“html *”选择文档中的所有元素，“！important”覆盖其他样式表设置。您可以使用Greasemonkey脚本将其应用于所有页面;例如here

编辑这会显示任何特定元素的边框和填充，但不会在CSS box model中显示该元素的边距。但是，父元素的轮廓将包含子元素的边距。例如，在html上

<html><body><div style="width: 200px">
  <p style="margin: 50px;">Lorem ipsum</p></div>
</body></html>

Firebug技术显示（紫色注释）：

screenshot of results