如何调试 CSS/Javascript 悬停问题

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

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

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

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

40777 次浏览
小开
最佳答案

向获取 :hover的元素添加一个 onmouseover函数处理程序。在这个函数中，对您希望了解的任何元素调用 console.info(element)。

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

当您使用 firebug 活动运行此命令时，元素将可以在 firebug 控制台中进行检查。

小开

对于 css 问题，我发现 web 开发者插件是无价之宝:

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

装上它，然后你就有两个可能的工具在你的处置。

  1. 从任何鼠标悬停元素上的文件继承 css，使用 shift-ctrl-y

  2. 计算 css (包括任何内联样式 = 应用的不在。Css 文件-或通过。Css 方法来自 jquery 等)-按 shift-ctrl-f

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

当然，它还有其他很好的用途，比如对表单进行高超的调试，包括编辑隐藏字段和 cookie (可用于渗透测试)

小开

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

激活浏览器中的悬停元素，然后右击并选择“检查元素”。页面将冻结在它的当前状态允许你检查短暂的对象到你的心的内容。

小开

你可以在 Firebug 中这样做，但它有点“ bug”。如果你检查元素，然后点击 html 选项卡，例如 DOM 选项卡，当你回到 html 选项卡时，右边的“ style”css 选项卡会有一个箭头下拉选择器，在那里你可以选择该元素的: hover 状态为活动状态。不得不切换标签才能显示出来，这很糟糕，但对我来说很有效。

小开

在 Firebug 中没有完美的解决方案(鼠标悬停/悬停模拟效果)。

然而，有几种方法可以在 firebug 中编辑悬停状态:

  1. 添加 :active状态和 :hover状态

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

    如果你在你的元素上向下滑动鼠标，拖动并释放，它将保持活动状态。

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

    您可以通过单击源文件(在 Firebug 的 Style 选项卡中)来编辑 CSS 规则

    然后，当然要从元素中添加(并删除) .hover类。

小开

您还可以检查该元素，然后在样式选项卡上应该有一个小下拉箭头。它将有一些像“显示用户代理”，“扩展速记属性”，然后应该有2个以下(我猜测你正在检查的东西有一个悬浮状态) :active和 :hover选择的 :hover，你应该是黄金。

小开

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

小开

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

小开

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

小开

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

enter image description here

小开

一些 JavaScript 工具包(如 Dojo)使用 dijitButtonHover 等 CSS 类来设计样式，而不是使用: hover。

所以“样式”选项卡中的“悬停技巧”不起作用。

相反，您可以在 HTML 选项卡中右键单击 Node (谁的 CSS 类发生了更改) ，并且“在属性更改时中断”

小开

浏览器(35版) :

  • 检查元素
  • 在元素查看器中右键单击元素。
  • 选择“ Force element state”-> : active，: hover，: focus，: vised
小开

在 Firefox (v33.1.1)中:

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

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

HTML Box Visualizer-GitHub

小开

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

enter image description here

结果:

enter image description here

Source (图像是在 CC-BY-SA v2.5，Mozilla 贡献者下授权的)


提交答案