如何在浏览器中检查消失的元素？

Posted 2021-04-02

如何检查鼠标移开时消失的元素？

我不知道它的ID，类或任何东西，但想要检查它。

我试过的解决方案：

在控制台$('*:contains("some text")')中运行jQuery选择器，但没有任何运气，主要是因为该元素未被隐藏但可能从DOM树中删除。

手动检查DOM树的变化给了我什么，因为它似乎太快而无法注意到已发生的变化。

成功：

我在事件断点方面取得了成功。具体来说 - 在我的情况下是mousedown。只需转到Chrome中的Sources-> Event Listener Breakpoints-> Mouse-> mousedown即可。之后我点击了我想检查的元素，在Scope Variables里面，我看到了一些有用的指示。

答案

（此答案仅适用于Chrome开发者工具。）

找到包含消失元素的元素。右键单击元素并应用“Break on ...> Subtree Modifications”。这将在元素消失之前抛出调试器暂停，这将允许您与处于暂停状态的元素进行交互。

另一答案

Chrome中的另一种方法：

显示所需的元素时，按F8（或Ctrl + /）。这将破坏脚本执行，同时完全冻结DOM。

从那里你可以使用Ctrl + Shift + C来选择转瞬即逝的元素。

另一答案

我在Mac上使用chrome我已经按照上面的步骤进行了操作但是我会尝试解释一下：

1. 右键单击并转到inspect元素。
2. 转到“来源”选项卡。
3. 然后将鼠标悬停在元素上。
4. 然后使用键盘F8或Command(Window) 。它将暂停屏幕静止状态，并且元素在悬停时不会消失。

另一答案

在Firebug中有不同的解决方案：

1. 您可以在html面板中使用Break On Mutate。 （有了这个，你也可以找出它是哪个元素）
2. 您可以右键单击该元素，然后选择Inspect Element with Firebug

您也可以关注issue 551，它要求暂时阻止特定事件的方法。

编辑：

要找出它是哪个元素，还可以启用HTML panel options突出显示更改，展开更改并将更改滚动到视图中，以使元素在HTML面板中可见。

塞巴斯蒂安

另一答案

就我而言，我在谷歌浏览器上使用了Expand递归选项：

步骤是：

1. 检查下拉字段
2. 找到动态DOM（紫色突出显示）
3. 右键单击该动态DOM
4. 选择递归扩展：
5. 我们可以看到所有元素都存在

这是一个演示：

另一答案

您可以在元素下查看检查器中出现和消失的元素。如果您在元素可见时导航到该元素，您应该能够看到它消失或在状态更改时看到其css更改。

这可以使用firefox中的firebug或chrome中的内置检查器。

另一答案

我有同样的问题，但我使用Firefox它消失后，我打开检查元素找到一个解决方案：打开4破折号（设置）转到Web开发人员>调试器并立即按F8这是停止脚本的暂停的快捷方式在它启动并检测到您打开开发人员工具之前