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

Question

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

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

我试过的解决方案:

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

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

成功:

我在事件断点方面取得了成功.具体来说 - 在我的情况下是mousedown.只需转到Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome.之后我点击了我要检查的元素,在里面Scope Variables我看到了一些有用的方向.

Answer 1

(此答案仅适用于Chrome开发者工具.)

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

Answer 2

Chrome中的另一种方法:

显示所需的元素时,按F8(或Ctrl + /).这将破坏脚本执行,同时完全冻结DOM.

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

Answer 3

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

现在您有 5 秒钟的时间让您的元素出现。一旦出现，请等待调试器命中。只要你不恢复，你可以玩你的元素，它不会消失。

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

将此添加为书签：

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

下次您想使用它时，只需单击/点按此书签即可。

Answer 4

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

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

Answer 5

2021年验证

请执行下列操作：

1. 打开控制台并导航到 Elements 选项卡
2. 类型command + shift + P(OSX) 或control + shift + P(Windows)
3. 输入单词 focused
4. 选择Emulate a focused page从菜单

现在在控制台中单击不会关闭元素。

Answer 6

该Emulate a focused page功能是检查消失元素的最佳方式。启用此功能后，弹出窗口不会消失。

截至2023 年 5 月，Chrome 已重新定位此功能的菜单项。请查看下面的屏幕截图来找到它。该功能可以在“渲染”窗格的第 9 个选项中找到。