html - 如何在某些浏览器中查看 div（等）矩形

Question

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

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

除了破解 Firefox 源代码之外，SO 是否知道我如何在网络上实现类似的结果？任何浏览器都可以。

在此处输入图像描述

score 1 · Accepted Answer

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

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

"html *" 选择文档中的所有元素，"!important" 覆盖其他样式表设置。您可以使用 Greasemonkey 脚本将此应用于所有页面；这里的例子

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

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

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

结果截图

1 回答 1