如何调试CSS / JavaScript悬停问题

71

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

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

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

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

— 杰森·克里顿（Jason Creighton）
source

5

当您将光标移到萤火虫中的文本上却消失了的那一刻很糟糕。

2

转到“源”选项卡->“悬停在任何内容上”->按F8键-它会“冻结”屏幕，以便当您将鼠标悬停时可以看到DOM中发生的一切

— Abhinav Singi 2015年

22

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

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

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

— 马特·布里奇斯
source

1

很好，您对“ info”的提及使我第一次了解了Firebug控制台API，并且发现还有“ console.dir”（DOM属性转储）和“ console.dirxml”（HTML源树转储）。）可悲的是，它并没有解决像实时显示一样准确显示正在应用哪些CSS规则的问题，但也许我希望太多。

— 杰森·克赖顿

2

我发现Neum的方法更简单，更有用。

— 科里之家

2

是的，我也是-但在最初的问答时，此功能在萤火虫中不存在:)

— Matt Bridges

应该在哪里添加？在控制台中的某个地方？

— Eoin

44

您可以在Firebug中执行此操作，但是有点“麻烦”。如果您检查元素，然后单击html选项卡，然后单击DOM选项卡，例如，当返回html选项卡时，右侧的“样式” css选项卡将具有一个箭头下拉选择器，您可以在其中选择：hover该元素的状态为有效。很遗憾，必须切换标签才能显示它，但是它对我有用。

— 纽姆
source

8

大提示！但是，它并不是越野车（至少不是最新版本的Firebug）。“样式” css选项卡上的下拉箭头始终存在。只需选择：hover状态，便一切就绪。

— 科里之家

7

问题是，有时这些样式没有在CSS中，它们是动态由JavaScript应用

— 亚当白肋烟

3

遗憾的是，这不适用于由悬停效果引起的javascript DOM更改。我知道我迟到了两年，但是我遇到了完全相同的问题。例如，我无法检查仅在悬停状态期间存在的元素（在鼠标悬停时创建，在鼠标离开时销毁）。

— ProblemsSuSumit

32

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

enter image description here

— 苏博德·古拉克（Subodh Ghulaxe）
source

1

我在Chrome中找到了与之等效的功能，但我以前从未听说过该功能。说真的，这对我来说就像是震撼和突破。

— kand

2

请注意，Firefox现在具有一个新图标，您可以单击该图标。样式窗口右上角的三个部分重叠的框。

— TylerH's

但这并不能解决使用Javascript添加类时的张贴者问题。一旦您离开该类，就将删除该类，而您需要检查的是该悬停类，而不是伪元素。仍然是非常有用的知识:)

— Eoin

19

在Firebug中，在HTML视图中，查看右侧面板并找到“样式”标签。单击向下箭头，然后选择:hover。

— 凯莉·约翰逊
source

5

在Firefox（v33.1.1）中：

检查元素（Q）
在DOM视图中，右键单击元素
在上下文菜单的底部选择：hover，：active或：focus

— 马克西米利安·科勒（MaximilianKöhler）
source

3

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

因此，“样式”选项卡：hover技巧不起作用。

相反，您可以右键单击HTML选项卡中的Node（其CSS类已更改），然后单击“ Break on Attribute Change”

— 阿罗
source

3

在Chrome（版本35）中：

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

— 绍尼亚
source

2

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

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

加载它，那么您就有2种可能的工具可供使用。

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

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

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

— 迪米塔尔·克里斯托夫（Dimitar Christoff）
source

2

您还可以检查该元素，然后在样式选项卡上应该有一个小下拉箭头。它将显示“ Show User Agent”，“ Expand Shorthand Properties”之类的内容，然后在其下再添加2个（我猜您正在检查具有悬停状态的内容），:active然后:hover选择，则:hover应该是金色的。

— 拉莫内古鲁
source

哇，我到处都是金光闪闪！:-)

— Marcel

1

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

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在浏览器中激活悬停元素，然后右键单击并选择“检查元素”。该页面将冻结为当前状态，使您可以检查瞬息万变的对象是否符合您的内心需求。

— 迈克尔·西布利
source

1

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

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

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

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

如果您在元素上向下拖动，拖动并释放，则该元素将保持活动状态。
把:hover国家变成.hover阶级

您可以通过单击源文件（在Firebug的“样式”标签中）来编辑CSS规则

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

— 斯宾塞
source

1

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

结果：

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

— 巴鲁
source

0

我经常制作一些备用CSS或Javascript以“冻结”我悬停的事件；用Firebug对其进行完善，然后将鼠标悬停在原处。

— 卫城
source

0

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

— 用户名
source

0

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

HTML Box Visualizer-GitHub

— 加布里埃尔·麦克亚当斯
source