219

如何检查鼠标移开时消失的元素？ 示例下拉列表消失

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

我尝试过的解决方案：

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

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

成功：

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

4

11 回答 11

246

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

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

在此处输入图像描述

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

在此处输入图像描述

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

于 2015-12-04T19:09:22.223 回答
137

Chrome 中的另一种方法：

  • 打开开发工具 (F12)。
  • 选择“来源”选项卡。
  • 显示所需元素时，按 F8（或 Ctrl+/）。这将中断脚本执行并完全按照显示的方式“冻结”DOM。
  • 从这一点开始，使用 Ctrl+Shift+C 选择元素。
于 2017-01-31T17:27:43.753 回答
65
  1. 打开控制台
  2. 输入setTimeout(()=>{debugger;},5000);
  3. 按回车

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

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

将此添加为书签：

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

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

于 2020-03-11T15:06:30.640 回答
20

2022 年验证

请执行下列操作：

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

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

于 2021-06-04T02:19:58.617 回答
9

我在 Mac 上使用 chrome 我已按照上述步骤操作，但我会尝试解释更多：

  1. 右键单击并转到检查元素。
  2. 转到来源选项卡。
  3. 然后将鼠标悬停在元素上。
  4. 然后使用键盘F8 或 Command(Window) \. 它将在静态状态下暂停屏幕，并且元素不会在悬停时消失。
于 2017-05-20T05:22:37.587 回答
2

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

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

此外，您可能需要关注问题 551，它要求提供一种暂时阻止特定事件的方法。

编辑：

要找出它是哪个元素，您还可以启用HTML 面板选项 Highlight Changes、Expand Changes和Scroll Changes Into View以使元素在 HTML 面板中可见。

塞巴斯蒂安

于 2013-10-17T12:23:41.127 回答
2

就我而言，我在 google chrome 上使用了Expand recursively选项：

步骤是：

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

这是一个演示：

在此处输入图像描述

于 2018-09-11T21:49:13.090 回答
1

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

它会将您带到源选项卡。返回到元素选项卡。这个时间码不会消失。

于 2019-05-08T10:18:05.640 回答
1

可能存在 Dom 元素和控制器功能争用刷新会话。在我的情况下，通过“不调试就开始”运行应用程序有帮助。

在此处输入图像描述

于 2020-11-20T23:33:40.917 回答
0

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

这可以通过 firefox 中的 firebug 或 chrome 中的内置检查器来实现。

于 2013-10-17T10:00:51.627 回答
-1

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

于 2019-03-31T20:22:06.213 回答