在 chrome 开发工具/firebug 中保留 DOM 元素突出显示

Question

有没有办法保留显示 DOM 元素的 boxmodel 属性（宽度、边距、填充、边框）的突出显示？我正在尝试在调整窗口大小时检查元素的行为，以便永久查看测量结果。

Chrome 开发者工具和 Firebug (Firefox) 的解决方案值得赞赏！

Answer 1

这对于 Chrome DevTools 来说是不可能的，但您可以打开

Metrics

面板右侧的

Elements

窗格来在调整窗口大小时监视内容区域/填充/边框/边距。

Answer 2

我知道这不是您正在寻找的确切答案，但是如果您为元素提供 Flex 显示，并检查该元素，您可以单击 Flex 按钮，它会在屏幕上以橙色突出显示它你。希望尽快添加实际功能！希望这有帮助！

Answer 3

现在可以使用开发工具在 Firefox 中实现这一点。

1. 打开开发工具检查器 (

   ctrl

   +

   shift

   +

   i

   )
2. 单击您想要突出显示的元素
3. 在右侧的 CSS 规则选项卡中，单击

   element

   选择器旁边的小方块。

此外，您还可以突出显示使用相同 CSS 选择器的所有元素：