Firefox:当 ficus 离开元素时,如何 'pin' 元素的颜色、边距和填充?

Firefox: How does one 'pin' the coloring of elements, their magins, and their paddings when focus leaves the element?

当鼠标悬停在 Firefox 检查器中的 HTML 元素上时,在视口中以该元素、该元素的填充和该元素的边距的颜色显示。非常方便。

例如:

一旦您在检查器中停止将鼠标悬停在该元素上,颜色就会消失。

如何 "pin" 着色,以便您可以在检查器中将鼠标移开元素,并仍然对其进行着色?

这将非常有用,例如,在滚动视口、调整页面的缩放级别、快速查看其他检查器选项卡之一等时。

这曾经是荧光笔的默认行为(荧光笔就是这种盒模型区域着色的名称)。当您 select 检查器中的一个节点时,荧光笔将保持可见。 这是几年前更改的,因为它妨碍了。

现在,我同意这在某些情况下可能非常有用,实际上您仍然可以通过多种方式实现这一目标:

  • highlight命令:按shift+F2调出命令行工具,使用highlight命令。此命令适用于 CSS select 或。在您的屏幕截图中,您 select 编辑了 ID 为 question-form 的元素。使用命令,您可以这样做:highlight #question-form。该命令支持 show/hide 指南、节点信息栏、选择颜色、选择要查看的框模型区域等的各种非常有用的参数...(输入 help highlight 了解更多信息信息)。
  • 规则视图 css select 或荧光笔:在检查器中,包含应用于 selected 元素的 CSS 规则的边栏称为规则视图。在此视图中,每次您看到 selector 时,其旁边都会有一个图标。单击此图标会将荧光笔锁定在与此 selector 匹配的所有元素上。它的用途略有不同,但同样有用,尤其是当您不确定给定规则适用于哪些元素时。