如何调试CSS / JavaScript悬停问题

Question

我经常发现自己想调试CSS布局问题，这些问题涉及Java语言引起的DOM更改，以响应悬停事件或由于：hover选择器而导致的不同CSS规则。

通常，我会使用Firebug来检查给我带来麻烦的元素，并查看其CSS属性是什么，以及这些属性来自何处。但是，当涉及到悬停时，这将变得不可能，因为一旦将鼠标移到Firebug面板上，感兴趣的元素就不再悬停，适用的CSS规则也会不同，并且（在这种情况下，
JS悬停）更改了DOM。

有没有什么办法可以“冻结” DOM和应用程序的状态：悬停，以检查DOM，因为它是 在 一个悬停事件？

当然，任何其他有关调试此类问题的想法都欢迎。

Answer 1

将onmouseover函数处理程序添加到采用的元素:hover。在该函数内，调用console.info(element)您想知道的任何元素。

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

当您在启用Firebug的情况下运行此命令时，该元素将可在Firebug控制台中进行检查。