Firefox Dev Tools在单击元素时突出显示DOM节点

Question

要明确的是，从DOM Inspector到页面的元素中找不到突出显示，反之亦然。这是我以前见过的行为，但后来我经常使用Chrome。

我正在调试一个不接受点击，或允许选择或基本上以任何方式获得焦点的文本区域。我注意到单击页面中的textarea会导致Inspector中的多个DOM节点突出显示，然后在一秒钟后逐渐消失。没有突出显示的节点是textarea;他们是textarea的父母，包括身体，但不一定是textarea和身体之间的所有父母。还有一位父母的兄弟姐妹也被强调了。

这是Firefox试图告诉我的一些事情，但我不知道是什么。我觉得我的原始问题的答案可能包含在这个亮点中，只要我知道它的含义。

在附带的屏幕截图中，您可以看到以蓝色突出显示的textarea，作为选定元素，以及其他一些元素上相当粗略的高光;这是在我点击textarea之后（在页面中，就像我试图在其中输入一些文本;而不是在检查器中）

这是什么意思？

Answer 1

当标记视图中的节点（屏幕截图中的内容）突出显示时，表示这些节点已经过突变。这些可以是以下方式：

• 节点上的属性值更改
• 添加/删除子节点

现在，你实际上想要一种方法来悬停文本框并获取标记视图以选择文本框，对吗？

您可以通过两种方式实现这一目标：

• 按下快捷键Ctrl + Shift + C.您将在鼠标后面的页面上看到一个叠加层。转到文本框并单击它。
• 点击开发者工具左上角的“从页面中选择元素”按钮，将显示相同的节点选择器。

有关更多更深入的信息：请访问MDN页面：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector