如何在 Firebug 中检查网页的动态悬停元素？

Posted 2023-05-08

【中文标题】如何在 Firebug 中检查网页的动态悬停元素？

【英文标题】：How to inspect dynamic on-hover elements of the webpage in Firebug?

【发布时间】：2014-10-12 12:57:31

【问题描述】：

我有一个网页，当您将鼠标悬停在某些图标上时会显示照片预览。我想在 Firebug 中检查这些预览 div，但问题是您无法用鼠标到达它，因为当您将鼠标从图标上移开时预览会消失！

有没有办法解决这个问题？

一种可能的解决方案是通过一些键盘快捷键来停止 javascript。 不一定需要移动鼠标光标，因为那样预览就会消失。但是在“Is it possible to stop a javascript with Firebug without using breakpoints?”中查看答案似乎是不可能的......

另请注意，该元素在不可见时不会隐藏在任何地方，它是在悬停时创建然后删除的。

【问题讨论】：

你的意思是这样的情况：http://www.starplugins.com/cloudzoom?

@antithesis 是的，这是一个很好的例子。

How to debug CSS/Javascript hover issues的可能重复

【参考方案1】：

在这种情况下：http://www.starplugins.com/cloudzoom 一个适用于 Firefox/Chrome 开发者工具和 firebug 的快速解决方案如下：

打开开发者工具 将页面滚动到具有悬停效果的元素稍微被开发人员工具窗格覆盖的位置。 这样，当您“鼠标移出”元素并“鼠标移入”到开发人员工具窗格时，悬停效果仍然有效。

这不是最好的解决方案，但它可能会有所帮助:)

更新： （它涵盖了this case 并适用于 Chrome）：

打开开发者工具 右键单击要检查的元素，但不要单击“检查元素”或其他任何内容 弹出窗口将冻结，因此您至少可以在已打开的检查器中找到它

【讨论】：

这似乎适用于 cloudzoom 插件，但一般不适用。例如，如果您将鼠标悬停在 this page 上的相机图标上，照片预览将消失（至少在 Chrome 中）。

【参考方案2】：

适用于 Chrome 开发者工具。您可以选择父dom节点并右键单击，然后选择“Break on subtree modify”。详情请查看https://camerondwyer.com/2018/07/11/how-to-inspect-dynamic-html-elements-that-keep-disappearing-in-chrome/