firefox - 我可以用什么来勾勒带有可见内边距、边距和边框的 HTML 元素？

Question

我通常会很好地使用 Chrome Web Developer 扩展来勾勒元素，调试我的 CSS 等，当这不符合任务时，我使用 Firefox 版本（原始的，高级版本），但我会真正喜欢的是一个工具，它可以勾勒出元素的“足迹”，显示“核心”元素、它的填充、它的实际宽度的边框和它的边距。

Chrome 或 Firefox 是否有这样的工具？

Answer 1

概述所有元素：

* {
  outline: 1px red solid;
}

Answer 2

Chrome 开发工具应有尽有：

您可以看到黄色的实际大小，最深蓝色的边距，浅蓝色的填充，以及最浅蓝色的实际元素。然后，您可以打开控制台并切换到“指标”部分以查看类似于 firebug 中的“布局”的内容。

PS。作为多年的前 firebug 粉丝，我可以向您保证，Chrome 开发工具现在实际上比 firebug 更强大，您只需要发现所有功能。

Answer 3

具有讽刺意味的是，所有浏览器的 IE 都内置在开发工具中（在 HTML 选项卡上时为“布局”）。

对于 Firefox，优秀的Firebug有一个类似的工具（同样，HTML 选项卡，右侧的“布局”）。