我怎么能检查一个元素消失时,我的鼠标移动?

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

我尝试过的解决方案:

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

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

成功:

我已经成功地使用了事件断点。特别是在我的例子中,鼠标向下。只需去源代码->事件监听器断点->鼠标->鼠标在Chrome。之后,我点击了我想要检查的元素,在Scope Variables中我看到了一些有用的说明。


当前回答

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

在这里输入图像描述

其他回答

我写过一篇关于调试CSS中消失元素的文章

使用热键自动进入调试器模式热键键盘快捷键:


安装快捷键扩展 点击扩展图标,选择“选项”: 配置如下: 点击“保存快捷方式”按钮(右下角)


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


我使用的是Windows操作系统,这个热键组合对我来说很好,不会被任何其他快捷键“带走”,但当然,你可以选择任何其他快捷键。

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

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

2019年10月22日更新:随着v. 70的发布,看起来FireFox终于支持这种调试2 3:

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

在我的情况下,我使用扩展递归谷歌chrome选项:

步骤如下:

检查下拉框 找到动态DOM(紫色高亮部分) 鼠标右键单击动态DOM 选择递归扩展: 我们可以看到所有的元素都在那里

下面是一个演示:

打开控制台 输入setTimeout(()=>{调试器;},5000); 按回车键

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


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

添加以下作为书签:

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

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

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

你可以在HTML面板中使用Break On Mutate。(有了这个,你也可以找到它是哪个元素) 您可以右键单击元素并选择Inspect element with Firebug

此外,您可能还想了解第551期,它要求使用一种方法暂时阻止特定事件。

编辑:

要找出它是哪个元素,您还可以启用HTML面板选项高亮显示更改,展开更改和滚动更改到视图,使元素在HTML面板中可见。

塞巴斯蒂安。