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

Posted 2023-03-07

【中文标题】如何检查浏览器中消失的元素？

【英文标题】：How can I inspect disappearing element in a browser?

【发布时间】：2013-10-25 16:14:59

【问题描述】：

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

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

我尝试过的解决方案：

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

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

成功：

我已经成功处理了事件断点。具体来说-在我的情况下是mousedown。只需在 Chrome 中转到Sources-> Event Listener Breakpoints-> Mouse-> mousedown。之后我点击了我想要检查的元素，在Scope Variables 中我看到了一些有用的指示。

【问题讨论】：

您的问题有所帮助，尽管我没有使用源代码进入断点，但我在控制台中执行了以下脚本：document.body.addEventListener('mouseup',function() debugger; ) 这让我休息了一下，我可以检查创建的元素。

你摇滚。 React-Select 控件有这个确切的问题，我无法查看列表项的 html，因为只要我点击离开，子树就会删除。需要项目 ID 才能使用 Selenium 自动点击。谢谢！

【参考方案1】：

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

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

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

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

【讨论】：

为了避免一些可能的混淆 - 调试器将在您触发事件时暂停，也就是输入地名。当屏幕暂停时，只需点击 DOM 本身的播放按钮，您就可以触发事件。

如果页面捕获了右键单击并在右键单击时执行它自己的操作，这将不起作用。

这不适用于同一容器中的两个对话框中的第一个

@Still_learning 你能解释一下“同一个容器中的两个对话框”是什么意思吗？

<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container> - 在我的情况下，第一个对话框只显示，直到数据从数据库到达，大约 1 秒

【参考方案2】：

Chrome 中的另一种方法：

打开 devTools (F12)。 选择“来源”标签。 显示所需元素时，按 F8（或 Ctrl+/）。 这将中断脚本的执行并完全“冻结”DOM，因为它显示出来。 从此时开始，使用 Ctrl+Shift+C 选择元素。

【讨论】：

完美！！这正是我想要的

我注意到只有在“源”选项卡中已经打开了开发人员工具时，这才有效。

它确实冻结了代码的执行，但元素仍然消失了（我正在使用 React）。

这不适用于 Google 视频控件弹出窗口...一旦您按下键，控件就会从视图中消失，并且之前已完全消失冻结发生。

这根本不起作用......元素仍然消失。我正在使用 Vue - 也许它与 Chrome 开发者工具不一致？

【参考方案3】：

打开控制台 输入setTimeout(()=>debugger;,5000); 按 Enter 键

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

---

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

将此添加为书签：

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

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

【讨论】：

这是调试消失元素最快最稳定的方法^

这真是太好了！我很生气，我没想到这一点

@Mojtaba 很好的答案

这是唯一对我有用的解决方案。 （此处的多个其他答案中的“F8”解决方案不起作用。）

你太棒了！

【参考方案4】：

2022 年验证

执行以下操作：

打开控制台并导航到元素选项卡 输入 command + shift + P (OSX) 或 control + shift + P (Windows) 输入单词focused 从菜单中选择Emulate a focused page

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

【参考方案5】：

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

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

【讨论】：

谢谢您，谢谢您的详细说明！在展示了极度的灵巧之后——点击一个按钮，按下Ctr + Shift + C，将鼠标悬停在元素上，然后在一秒半的时间内按下F8——我终于让我的元素处于可检查模式跨度>

【参考方案6】：

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

您可以在 HTML 面板中使用Break On Mutate。 （通过它您还可以找出它是哪个元素） 您可以右键单击元素并选择 Inspect Element with Firebug

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

编辑：

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

塞巴斯蒂安

【讨论】：

Chrome 也有不错的检查员。问题是 - 右键单击​​元素使其在我的情况下消失。 Chrome 也有对 DOM 变异的 Break。这个问题 - 我不知道它是哪个元素，因为它是动态生成的

我刚刚编辑了我的答案，以提示如何知道它是哪个元素。

【参考方案7】：

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

步骤如下：

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

这是一个演示：

【参考方案8】：

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

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

【讨论】：

我的组件在我按下 F8 后立即消失，在暂停之前。

【参考方案9】：

可能存在 Dom 元素和控制器函数争相刷新会话。通过“不调试就开始”运行应用程序对我来说很有帮助。

enter image description here

【参考方案10】：

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

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

【讨论】：

是的。我已经说过，DOM 中的变化发生得太快了，并且页面会大量修改 DOM，所以这真的不是一个解决方案，因为我无法将我需要的元素与到处的大量修改区分开来:)

您可以尝试使用 console.log 跟踪正在发生的事情，例如在您尝试检查的功能开始时，您可以查看对象 css 等。或者放慢更改速度，直到您知道它们正常工作，然后将速度更改为您想要的速度，例如在jQuery中隐藏（'慢'）

问题是 - 这不是我自己的代码库，它是一个遗留的、大的、陈旧的代码库，在其中简单地搜索文件并没有给我任何东西.. :)

您也可以在检查器中查看页面正在使用的文件。我会一直删除它们，直到它损坏，然后查看损坏它的文件并从那里开始。您也可以随时搜索实际文件。

这个怎么样：***.com/questions/10213703/…

【参考方案11】：

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