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

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

我不知道它是ID，类还是什么，但想检查一下。

我尝试过的解决方案：

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

手动检查DOM树中的更改并没有给我任何帮助，因为似乎太快就无法注意到更改了。

成功：

我已经成功实现了事件断点。具体来说-就我而言是mousedown 只需Sources-> Event Listener Breakpoints-> Mouse-> mousedown在Chrome中进入即可。之后，我单击了要检查的元素，并在内部Scope Variables看到了一些有用的说明。

（此答案仅适用于Chrome开发者工具。请参见下面的更新。）

查找包含消失元素的元素。右键单击该元素，然后应用“中断...>子树修改”。这将在元素消失之前引发调试器暂停，这将允许您在暂停状态下与元素进行交互。

更新2019年10月22日：随着70版本的发布，FireFox看起来终于支持了这种调试2 3：

Chrome中的另一种方法：

• 打开devTools（F12）。
• 选择“来源”标签。
• 显示所需元素时，请按F8（或Ctrl + /）。这将中断脚本的执行，并完全冻结“ DOM”的显示状态。
• 从这一点开始，使用Ctrl + Shift + C选择元素。

1. 打开控制台
2. 输入 setTimeout(()=>{debugger;},5000);
3. 按Enter

现在您有5秒钟的时间使您的元素出现。一旦出现，请等待调试器点击。只要您不继续，就可以使用您的元素，并且它不会消失。

避免每次重复上述步骤的有用提示：

将此添加为书签：

1. 为任何页面添加书签
2. 编辑这个新书签
3. 将URL /位置替换为： javascript:(function(){setTimeout(()=>{debugger;},5000);})();

下次您希望使用此书签时，只需单击/点击此书签。

我在Mac上使用chrome，我已经按照上述步骤操作，但是我将尝试说明更多内容：

1. 右键单击并检查元素。
2. 转到源标签。
3. 然后将鼠标悬停在元素上。
4. 然后使用键盘F8 或 Command(Window) \。它将以静态状态暂停屏幕，并且该元素在悬停时不会消失。

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

1. 您可以在HTML面板内使用Break On Mutate。（与此同时，您还可以找出它是哪个元素）
2. 您可以右键单击该元素，然后选择使用Firebug检查元素

另外，您可能需要遵循问题551，该问题要求一种暂时阻止特定事件的方法。

编辑：

要找出它是哪个元素，您还可以启用HTML面板选项“ 突出显示更改”，“ 展开更改”和“ 将更改滚动到视图”将以使该元素在HTML面板内可见。

塞巴斯蒂安

就我而言，我在Google chrome上使用了“ 递归扩展”选项：

这些步骤是：

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

这是一个演示：

用鼠标悬停在元素上，然后按F8键（在Chrome中为this）以暂停脚本执行。悬停状态对您仍然可见。

它带您到“源”选项卡。返回到“元素”选项卡。此时间代码不会消失。

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

Firefox中的萤火虫或Chrome中的内置检查器可以实现此目的。

我遇到了同样的问题，但是我使用Firefox，一旦打开检查元素，它就会消失：找到4个破折号（设置），前往Web开发人员>调试器，然后立即按F8键，这是停止脚本的暂停的快捷方式在发现并打开开发人员工具之前