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

Question

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

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

我尝试过的解决方案：

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

手动检查 DOM 树的变化没有给我任何帮助，因为它似乎太快以至于无法注意到发生了什么变化。

成功：

我在事件断点方面取得了成功。特别是 - 在我的例子中是 mousedown。只需在 Chrome 中转到 Sources-> Event Listener Breakpoints-> Mouse-> mousedown 。之后，我单击了要检查的元素，然后在 Scope Variables 中看到了一些有用的说明。

原文由 lukas.pukenis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

2019 年 10 月 22 日更新： 随着 v.70 的发布，FireFox 似乎终于支持这种调试 2 3 ：

2020 年 9 月 15 日更新： Chrome 有一个“模拟聚焦页面”选项（您可以从 [⌘]+[P] 命令菜单或全局首选项中获取）来满足这一确切需求。 5 - h/t @sulco 在推特上

原文由 arxpoetica 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Chrome 中的另一种方法：

• 打开开发者工具 (F12)。
• 选择“来源”选项卡。
• 在显示所需元素时，按 F8（或 Ctrl+/）。 这将中断脚本执行 并完全按照显示的方式“冻结”DOM。
• 从这一点开始，使用 Ctrl+Shift+C 选择元素。

原文由 Joseph Tinoco 发布，翻译遵循 CC BY-SA 4.0 许可协议