可以让 Firefox DevTools Inspector 高亮显示吗？

Question

我花了一些时间编写 HTML 和 CSS，并使用 Firefox 53 中的开发人员工具。特别是“HTML/DOM/CSS Inspector”。

当您将鼠标移到 Inspector 窗口中的 HTML 块上时，页面上相应呈现的 HTML 元素会突出显示。此外，还有一些有用的网格线和颜色叠加以及页​​面上绘制的其他内容，所有这些都是 Mozilla 开发人员的一个很好的决定。它显示随机divs 和其他元素可能如何重叠，非常适合显示边距折叠的位置等。

但是，当我将鼠标从 HTML 树上移开时，所有有用的突出显示和覆盖都消失了。有没有办法让突出显示/覆盖“粘住”？例如，直到我单击另一个 HTML 元素，或重新加载页面，或者...主动采取一些行动而不是简单地移动我的鼠标？

请注意，右键单击 Inspector 并选择 ":hover" 菜单条目显然不是我想要的。我想更改Inspector的鼠标悬停行为，而不是页面的鼠标悬停行为。

（现在我要再倒一杯威士忌，然后继续使用规则/计算与“浏览器样式”控件进行战斗。那些......设计得不太好。）

Answer 1

普通荧光笔无法切换为停留在页面上，它仅在悬停节点时做出反应。

只有一些其他荧光笔是粘性的，例如与特定 CSS 选择器匹配的元素的荧光笔或 CSS 网格荧光笔，两者都位于“规则”侧面板中：

匹配荧光笔的 CSS 选择器目前（从 Firefox 53 开始）是最接近您要查找的内容的选择器，尽管它缺少网格线。

此外，已经有人请求在 Mozilla 的错误跟踪器中添加粘性元素荧光笔。