如何调试CSS / Javascript悬停问题

Question

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

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

有什么方法可以“冻结”DOM的状态和应用：悬停以便在强制悬停事件期间检查DOM？

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

Answer 1

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

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

在Firefox（v33.1.1）中：

• 检查元素（Q）
• 在DOM视图中右键单击元素
• select：hover，：active或：焦点位于上下文菜单的底部

Answer 6

一些JavaScript工具包（如Dojo）使用CSS类（如dijitButtonHover）来设置样式而不是：悬停。

所以样式选项卡：悬停技巧不起作用。

相反，您可以在HTML标签中右键单击节点（谁的CSS类更改），然后单击“中断属性更改”

Answer 7

在Chrome（第35版）中：

• 检查元素
• 在元素查看器中右键单击元素。
• 选择“强制元素状态” - ＆gt; ：active，：hover，：focus，：visited

Answer 8

对于CSS问题，我发现Web开发人员插件非常宝贵：

http://chrispederick.com/work/web-developer/

加载它，然后你可以使用2种可能的工具。

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

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

后者也会返回应用于元素的所有类。

当然它有其他很多用途，例如，精湛的表格调试，包括编辑隐藏字段和cookie（可用于渗透测试）

Answer 9

你也可以检查那个元素，然后在样式上选项卡应该有一个小的下拉箭头。它将具有类似“显示用户代理”，“展开速记属性”的内容，然后应该还有2个（我猜你正在检查具有悬停状态的东西）:active和{{1选择:hover，你应该是金色的。

Answer 10

我遇到了同样的问题，发现虽然我无法使用Firebug检查Firefox中的悬停对象，但Safari的Web Inspector会冻结当前状态并允许检查。要激活Safari的Web检查器，只需在终端中输入以下行并重新启动Safari：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在浏览器中激活悬停元素，然后右键单击并选择“检查元素”。该页面将冻结其当前状态，允许您根据心脏内容检查稍纵即逝的物体。

Answer 11

在萤火虫中没有完美的解决方案（鼠标悬停/悬停模拟效果）。

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

1. 添加:active州以及:hover

   a:hover, a:active { ... }

   如果您在元素上按下鼠标，拖动并释放，它将保持活动状态。

2. 将:hover状态转换为.hover类

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

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

Answer 12

我经常制作一些替代CSS或Javascript来“冻结”我悬停的事件;用Firebug将它调整到完美，然后将我的悬停放回原位。

Answer 13

是的，您可以在触发悬停状态时右键单击“检查元素”。这在Firebug和WebKit中对我有用。

Answer 14

我知道这篇文章有点陈旧，但对于那些在Google上找到这个帖子的人，我创建了一个跨浏览器工具，只需移动鼠标就可以直观地显示HTML / CSS布局。您可以轻松查看悬停状态中的元素。

HTML Box Visualizer - GitHub

Answer 15

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

结果：

Source（图像根据Mozilla贡献者CC-BY-SA v2.5许可）