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

2020/10/28 20:02 · javascript ·  · 0评论

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

我不知道它是ID,类还是什么,但想检查一下。

我尝试过的解决方案:

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

手动检查DOM树中的更改并没有给我任何帮助,因为似乎太快就无法注意到更改了。

成功:

我已经成功实现了事件断点。具体来说-在我的情况下为mousedown。只需Sources-> Event Listener Breakpoints-> Mouse-> mousedown在Chrome中转到之后,我单击了要检查的元素,并在内部Scope Variables看到了一些有用的说明。

(此答案仅适用于Chrome开发者工具。请参见下面的更新。)

查找包含消失元素的元素。右键单击该元素,然后应用“中断...>子树修改”。这将在元素消失之前引发调试器暂停,这将允许您在暂停状态下与元素进行交互。

在此处输入图片说明

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

在此处输入图片说明

2020年9月15日更新: Chrome可以满足此确切需求的“模拟关注页面”选项(您可以从[⌘] + [P]命令菜单或全局偏好设置中获取)。5-h / t @sulco在Twitter上

Chrome中的另一种方法:

  • 打开devTools(F12)。
  • 选择“来源”标签。
  • 显示所需元素时,请按F8(或Ctrl + /)。这将破坏脚本的执行,并完全冻结“ DOM”的显示状态。
  • 从这一点上,使用Ctrl + Shift + C选择元素。
  1. 打开控制台
  2. 输入 setTimeout(()=>{debugger;},5000);
  3. 按Enter

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


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

将此添加为书签:

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

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

我在Mac上使用chrome,我已经按照上述步骤操作,但是我将尝试说明更多内容:

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

In Firebug there are different solutions for this:

  1. You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
  2. 您可以右键单击该元素,然后选择“使用Firebug检查元素”

另外,您可能需要遵循问题551,该问题要求一种暂时阻止特定事件的方法。

编辑:

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

塞巴斯蒂安

就我而言,我在Google chrome上使用了“递归扩展”选项:

这些步骤是:

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

这是一个演示:

在此处输入图片说明

用鼠标悬停在元素上,然后按F8键(在Chrome中为this)以暂停脚本执行。悬停状态对您仍然可见。

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

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

Firefox中的萤火虫或chrome中的内置检查器可以实现此目的。

我遇到了同样的问题,但是我使用Firefox,一旦打开检查元素,它就会消失:找到4个破折号(设置),前往Web开发人员>调试器,然后立即按F8键,这是停止脚本的暂停的快捷方式在发现并打开开发人员工具之前

本文地址:http://javascript.askforanswer.com/ruhejianchaliulanqizhongxiaoshideyuansu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!