如何调试CSS/Javascript悬停问题

Question

我经常发现自己想要调试CSS布局问题,这些问题涉及由Javascript引起的DOM更改,以响应悬停事件或由于:hover选择器而应用的不同CSS规则.

通常情况下,我会使用Firebug检查那些给我带来麻烦的元素,看看它的CSS属性是什么,以及这些属性的来源.但是,当涉及悬停时,它变得不可能,因为只要您将鼠标移动到Firebug面板,您感兴趣的元素就不再悬停,适用的CSS规则也不同,(在这种情况下) JS徘徊)DOM被改变了.

有没有办法可以"冻结"DOM的状态和应用程序:hover以便在悬停事件期间检查DOM ？

当然,欢迎任何关于如何调试此类问题的其他想法.

Answer 1

你可以在Firebug中做到这一点,但它有点"马车".如果您检查元素然后单击html选项卡,例如关闭DOM选项卡,当您返回到html选项卡时,右侧的"style"css选项卡将有一个箭头下拉选择器,您可以在其中选择:该元素的悬停状态为活动状态.很难切换标签让它显示但它对我有用.

棒极了!但是,这并不是错误的(至少在最新版本的Firebug中没有)."样式"css选项卡上的下拉箭头始终存在.只需选择:悬停状态即可. (8认同)
问题是有时这些样式不在CSS中,它们是由javascript动态应用的 (7认同)
遗憾的是,这不适用于由悬停效果引起的javascript DOM更改.我知道我迟到了两年,但我遇到了同样的问题.例如,我无法检查仅在悬停状态期间存在的元素(在鼠标悬停时创建,在鼠标离开时销毁). (3认同)

Answer 2

在检查链接时,Firebug显示默认的CSS状态,即应用于:link的样式.默认情况下,不显示:hover和:active样式.幸运的是,您可以通过单击样式并选择适当的选项来更改链接的状态:

在此输入图像描述

Answer 3

将onmouseover函数处理程序添加到正在执行的元素:hover.在该函数内部,调用console.info(element)您想要了解的任何元素.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

当您使用firebug激活时运行此元素,该元素将可用于在firebug控制台中进行检查.

Answer 4

在firebug中,在HTML视图中,查看右侧面板并找到"样式"选项卡.单击向下箭头并选择:hover.

Answer 5

在 Chrome（版本 35）中：

Answer 6

在Firefox(v33.1.1)中: