如何调试CSS/Javascript悬停问题

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

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

是否有任何方法可以“冻结”DOM的状态和：hover的应用程序，以便在悬停事件期间检查DOM的状态

---

当然，对于如何调试此类问题的任何其他想法都是受欢迎的。

将

onmouseover

函数处理程序添加到使用

：hover的元素中。在该函数中，对您想了解的任何元素调用
console.info（element）

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

当您在firebug处于活动状态时运行此程序时，该元素将可在firebug控制台中进行检查。
对于css问题，我发现web developer插件非常宝贵：


加载它，然后你有两个可能的工具供你使用

从任何moused-over元素上的文件继承css，请使用shift-ctrl-y

计算的css（包括不在.css文件中的任何内联样式=已应用-或通过jquery等中的.css方法）-按shift-ctrl-f

后者还将返回应用于元素的所有类

当然，它还有其他伟大的用途，例如，出色地调试表单，包括编辑隐藏字段和cookie（可用于渗透测试）
我也有同样的问题，我发现虽然我无法用Firebug检查Firefox中的悬停对象，Safari的Web检查器将冻结当前状态并允许检查。要激活Safari的web检查器，只需在终端中输入以下行并重新启动Safari：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在浏览器中激活悬停元素，然后右键单击并选择“检查元素”。页面将冻结在它的当前状态，允许你检查你的心的内容稍纵即逝的对象
 您可以在Firebug中执行此操作，但它有点“buggy”。如果您检查元素，然后单击html选项卡上的按钮，例如，单击DOM选项卡，当您返回html选项卡时，右侧的“样式”css选项卡将有一个箭头下拉选择器，您可以在其中选择要激活的元素的：悬停状态。必须切换选项卡才能显示它很糟糕，但对我来说很有效。
firebug中没有完美的解决方案（鼠标悬停/悬停模拟效果）

但是，有几种方法可以在firebug中编辑悬停状态：

添加一个
：active
状态以及您的
：hover

a:hover，a:active{…}

如果将鼠标放在图元上，将其拖离并释放，它将保持活动状态

将
：hover
状态转换为
.hover
类

您可以通过单击源文件（在Firebug的样式选项卡中）来编辑CSS规则

当然，您需要从元素中添加（并删除）
.hover
类

您也可以检查该元素，然后在样式选项卡上应该有一个小的下拉箭头。它将有类似“显示用户代理”、“扩展速记属性”的内容，然后在下面应该还有两个（我猜您正在检查具有悬停状态的内容）
：active
和
：hover
选择
：hover
，您应该是金色的。
我经常为您制作一些替代CSS或Javascript“冻结”我的悬停事件；使用Firebug将其调整到最佳状态并将我的悬停放回原位。
在Firebug中，在HTML视图中，查看右侧面板并找到“样式”选项卡。单击向下箭头并选择
：悬停
是的，您可以右键单击“检查元素”“当触发悬停状态时。这在Firebug和WebKit中对我很有效。
检查链接时，Firebug显示默认CSS状态，即应用于：链接的样式。默认情况下，不显示：悬停和：活动样式。幸运的是，您可以通过单击样式并选择适当的选项来更改链接的状态：

一些JavaScript工具包，如Dojo，使用dijitButtonHover等CSS类来设置样式，而不是：hover

所以样式标签：悬停技巧不起作用

相反，您可以右键单击HTML选项卡中的节点（谁的CSS类发生更改），然后在Chrome（版本35）中单击“属性更改时中断”：


检查元件
在元素查看器中，右键单击元素
选择“强制元素状态”->：活动、：悬停、：焦点、：访问
在Firefox（v33.1.1）中：


检查元件（Q）
在DOM视图中，右键单击元素
在关联菜单底部选择：悬停、：活动或：焦点
我知道这篇文章有点老，但对于那些在谷歌上找到这篇文章的人来说，我创建了一个跨浏览器工具，让你只需移动鼠标就可以可视化HTML/CSS布局。可以轻松查看处于悬停状态的图元

在较新的Firefox版本（至少v57及以上版本）中，inspector的UI与发布其他答案时略有不同。要启用和冻结元素的
：active
/
：hover
/
：focus
状态，请检查它（右键单击->检查元素），然后在检查器中单击：


结果:


（图像是根据Mozilla贡献者CC-BY-SA v2.5授权的）
这很好，你提到的“info”让我第一次看到Firebug控制台API，我发现还有“console.dir”（DOM pr）