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

Question

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

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

我尝试过的解决方案：

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

手动检查DOM树是否有任何改变，因为它似乎太快而无法注意到已发生的变化。

SUCCESS：

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

Answer 1

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

找到包含消失元素的元素。右键单击元素并应用＆＃34; Break on ...＆gt;子树修改。＆＃34;这将在元素消失之前抛出调试器暂停，这将允许您在暂停状态下与元素进行交互。

Answer 2

Chrome中的另一种方法：

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

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

Answer 3

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

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

---

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

将此添加为书签：

1. 为任何页面添加书签
2. 编辑此新书签
3. 使用以下网址替换网址/位置：javascript:(function(){setTimeout(()=>{debugger;},5000);})();

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

Answer 4

我在Mac上使用Chrome，我已按照上述步骤进行操作，但我会尝试解释一下：

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

Answer 5

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

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

此外，您可能需要关注issue 551，这会要求暂时阻止特定事件。

修改

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

塞巴斯蒂安

Answer 6

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

步骤是：

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

这是一个演示：

Answer 7

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

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

Answer 8

可能存在Dom元素，并且控制器在争吵以刷新会话。对于我来说，通过“无需调试即可启动”运行应用程序很有帮助。

https://ideone.com/bJDzgf

Answer 9

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

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

Answer 10

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

Answer 11

执行以下操作 (OSX)：

1. 打开控制台并导航到“元素”选项卡
2. 输入 command + shift + P
3. 输入单词 focused
4. 从菜单中选择Emulate a focused page

现在在控制台中四处点击不会关闭元素。