如何调试 CSS/Javascript 悬停问题答案

【问题标题】：How to debug CSS/Javascript hover issues如何调试 CSS/Javascript 悬停问题
【发布时间】：2010-11-08 00:35:03
【问题描述】：

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

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

有什么方法可以“冻结” DOM 的状态和 :hover 的应用程序，以便在在悬停事件期间检查 DOM？

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

【问题讨论】：

当您将光标移向萤火虫中的文本但它消失的可怕时刻。
转到源选项卡 -> 悬停在任何东西上 -> 按 F8 - 它会“冻结”你的屏幕，这样你就可以看到悬停时 DOM 中发生的一切

标签： javascript html css firebug hover

【解决方案1】：

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

结果：

Source（图像在 CC-BY-SA v2.5 下获得许可，Mozilla 贡献者）

【讨论】：

【解决方案2】：

我知道这篇文章有点老了，但对于那些在 Google 上找到这篇文章的人，我创建了一个跨浏览器工具，让您只需移动鼠标即可可视化 HTML/CSS 布局。您可以轻松查看处于悬停状态的元素。

HTML Box Visualizer - GitHub

【讨论】：

【解决方案3】：

在 Firefox (v33.1.1) 中：

检查元素 (Q)
在 DOM 视图中右键单击元素
在上下文菜单底部选择 :hover、:active 或 :focus

【讨论】：

【解决方案4】：

在 Chrome（版本 35）中：

检查元素
在元素查看器中右键单击元素。
选择“强制元素状态” -> :active, :hover, :focus, :visited

【讨论】：

【解决方案5】：

一些 JavaScript 工具包，例如 Dojo 使用 CSS 类（例如 dijitButtonHover）来设置样式而不是 :hover。

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

我在 Chrome 中找到了等效的功能，但我以前从不知道这个功能。说真的，这对我来说就像是令人兴奋和开创性的。
请注意，Firefox 现在有一个可以点击的新图标；样式窗口右上角的三个部分重叠的框。
但这并不能解决通过Javascript添加类时的海报问题。一旦你离开，这个类就被移除了，这个悬停类是你需要检查的，而不是伪元素。仍然是一个非常有用的知识点:)

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

哇，我全身金光闪闪！ :-)

【解决方案9】：

在 firebug 中，在 HTML 视图中，查看右侧面板并找到“样式”选项卡。点击向下箭头并选择:hover。

【讨论】：

【解决方案10】：

我经常制作一些备用 CSS 或 Javascript 来“冻结”我的悬停事件；使用 Firebug 将其调整至完美，并将我的悬停放回原位。

【讨论】：

【解决方案11】：

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

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

添加:active 状态以及您的:hover

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

如果您将鼠标放在您的元素上，拖动并释放，它会保持活动状态。
将:hover 状态转换为.hover 类

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

当然，您可以从元素中添加（和删除）.hover 类。

【讨论】：

【解决方案12】：

您可以在 Firebug 中执行此操作，但它有点“错误”。如果您检查元素然后单击 html 选项卡，例如单击 DOM 选项卡，当您返回 html 选项卡时，右侧的“样式”css 选项卡将有一个箭头下拉选择器，您可以在其中选择:hover 该元素的状态为活动状态。不得不切换标签才能显示它，但它对我有用。

【讨论】：

很棒的提示！但是，它不是错误的（至少在最新版本的 Firebug 中没有）。 “样式”css 选项卡上的下拉箭头始终存在。只需选择 :hover 状态即可。
问题是这些样式有时不在 CSS 中，它们是由 javascript 动态应用的
遗憾的是，这不适用于由悬停效果引起的 javascript DOM 更改。我知道我迟到了两年，但我遇到了完全相同的问题。例如，我无法检查仅在悬停状态期间存在的元素（在鼠标悬停时创建，在鼠标离开时销毁）。

【解决方案13】：

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在浏览器中激活悬停元素，然后右键单击并选择“检查元素”。页面将冻结在其当前状态，让您可以检查转瞬即逝的对象，让您心满意足。

【讨论】：

【解决方案14】：

对于 css 问题，我发现 Web 开发者插件非常宝贵：

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

加载它，然后您就有 2 个可能的工具供您使用。

从任何鼠标悬停元素上的文件继承 css，使用 shift-ctrl-y
计算的 css（包括应用的任何内联样式 = 不在 .css 文件中 - 或通过 jquery 等中的 .css 方法） - 按 shift-ctrl-f

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

当然它还有其他很好的用途，例如出色的表单调试，包括编辑隐藏字段和 cookie（可用于渗透测试）

【讨论】：

【解决方案15】：

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

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

当您在 firebug 活动的情况下运行此操作时，该元素将可用于在 firebug 控制台中检查。

【讨论】：

很好，你提到的“info”让我第一次看到 Firebug 控制台 API，我发现还有“console.dir”（DOM 属性转储）和“console” .dirxml"（HTML 源代码树转储。）遗憾的是，它并没有解决像实时视图那样准确显示正在应用的 CSS 规则的问题，但也许我希望太多。
我发现 Neum 的方法更简单、更有用。
是的，我也是——但在最初的问答时，萤火虫中不存在此功能:)
这个应该加到哪里？在控制台的某个地方？