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

我怎么能检查一个元素消失时，我的鼠标移动? Example dropdown which消失

.

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

我尝试过的解决方案:

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

手动检查DOM树的变化给我什么也没有，因为它似乎太快了，没有注意到有什么变化。

成功:

我已经成功地使用了事件断点。特别是在我的例子中，鼠标向下。只要去Chrome中的Sources-> Event Listener Breakpoints-> Mouse-> mousedown。之后，我点击了我想检查的元素，在Scope Variables里面，我看到了一些有用的说明。

132706 次浏览
小开

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

这是可能的firebug在firefox或chrome内置的检查器。

小开

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

  1. 你可以在HTML面板中使用中断突变。(有了这个，你也可以找到它是哪个元素)
  2. 你可以右键单击元素并选择用Firebug检查Element

此外，你可能想要遵循发行551，它要求一种暂时阻止特定事件的方法。

编辑:

要找出它是哪个元素，你还可以启用HTML面板选项 突出的变化， 扩大的变化和滚动进入视图，使元素在HTML面板中可见。

塞巴斯蒂安。

小开
最佳答案

(这个答案只适用于Chrome开发工具。参见下面的更新。)

找到包含消失元素的元素。右键单击元素并应用"Break on…>子树修改!”这将在元素消失之前抛出调试器暂停，这将允许您与处于暂停状态的元素交互。

enter image description here

随着v. 70的发布，看起来FireFox终于支持这种调试2 3.:

enter image description here

2020年9月15日更新: Chrome有一个“模拟一个集中的页面”;选项(您可以从[⌘]+[P]命令菜单或全局首选项中获得)，以满足这种确切的需求。5 - h/t在推特上@sulco

小开

Chrome中的另一种方法:

  • 打开devTools (F12)。
  • 选择“Sources”选项卡。
  • 当你想要的元素显示出来时，按F8(或Ctrl+/)。这将中断脚本执行和“冻结”DOM精确地显示。
  • 从这里开始，使用Ctrl+Shift+C选择元素。
小开

我在Mac上使用chrome浏览器，我遵循了上面的步骤，但我会试着解释更多:

  1. 右击并转到检查元素。
  2. 转到资源选项卡。
  3. 然后悬停在元素上。
  4. 然后使用键盘F8 或 Command(Window) \。它将在静态状态下暂停屏幕，悬停时元素不会消失。
小开

在我的情况下，我使用谷歌chrome上的递归地扩大选项:

步骤如下:

  1. 检查下拉框
  2. 找到动态DOM(紫色高亮部分)
  3. 鼠标右键单击动态DOM
    4. <李>选择递归地扩大: 李enter image description here < / >
  4. 我们可以看到所有的元素都在那里

下面是一个演示:

enter image description here

小开

我也有同样的问题，但我使用Firefox，一旦我打开inspect元素找到一个解决方案，它就消失了: 打开4虚线(设置)到web开发>调试器，并立即按F8，这是暂停的快捷方式，在它踢之前停止脚本，并检测到您打开了开发人员工具

小开

将鼠标悬停在元素上并按F8(在Chrome中)暂停脚本执行。悬停状态将对您保持可见。

它带你到sources选项卡。 返回“元素”选项卡。

.时间代码不会消失
小开
  1. 打开控制台
  2. 输入setTimeout(()=>{debugger;},5000);
  3. 按回车键

现在你有5秒钟的时间让你的元素出现。它出现后，等待调试器点击。只要你不继续，你可以玩你的元素，它不会消失。

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

添加以下作为书签:

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

下次你想使用这个，只需点击/点击这个书签。

小开

可能有Dom元素和控制器函数为了刷新会话而争斗。通过“启动而不调试”运行应用程序对我有帮助。

enter image description here

小开

2022年验证

做以下几点:

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

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

小开

我已经写了一个文章关于调试CSS消失的元素

使用热键自动进入debugger模式，带有热键键盘快捷键:

  1. 安装shortkeys扩展
  2. 点击扩展图标，选择"options":
    李点击快捷键选项菜单 < / >
  3. 按如下参数配置: 李List item < / >
  4. 点击“拯救shortcuts"按钮(右下角)

现在，转到任何页面，确保打开了devtools，并按CTRL+空格键键，此时检查目标元素是可见的。

我正在使用Windows操作系统，这个热键组合对我很好，不是“take”;通过其他捷径，当然，你可以选择其他捷径。


提交答案