如何debuggingCSS / Javascripthover问题

我经常发现自己想要debugging涉及JavaScript引起的DOM变化的CSS布局问题,以响应hover事件或由于:hoverselect器而应用的不同CSS规则。

通常情况下,我会使用Firebug来检查给我带来麻烦的元素,看看它的CSS属性是什么,以及这些属性来自哪里。 但是,当涉及hover时,这是不可能的,因为只要您将鼠标移动到Firebug面板,您感兴趣的元素就不再徘徊,所应用的CSS规则就不同了, JShover)DOM被改变。

有什么办法可以“冻结”DOM的状态和应用:hover为了检查DOM hover事件?

当然,欢迎任何关于如何debugging这类问题的其他想法。

14 Solutions collect form web for “如何debuggingCSS / Javascripthover问题”

添加一个onmouseover函数处理程序到正在采取:hover的元素。 在那个函数里面,调用console.info(element)你想知道的任何元素。

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

当你使用firebug运行这个元素时,元素将可以在firebug控制台中进行检查。

你可以在Firebug中做到这一点,但它有点“车”。 如果您检查元素,然后单击HTML标签,例如,到DOM选项卡,当你回到HTML选项卡右侧的“样式”CSS选项卡将有一个箭头下拉select器,您可以select:将该元素hover状态为活动状态。 吮吸不得不切换标签,让它显示,但它适用于我。

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

在这里输入图像说明

在firebug中,在HTML视图中,查看右侧面板并find“样式”选项卡。 点击向下的箭头并select:hover

在Firefox(v33.1.1)中:

  • 检查元件(Q)
  • 在DOM视图中,右键单击该元素
  • 在上下文菜单的底部select:hover,:active或:focus

一些JavaScript工具包,比如Dojo,使用CSS类,比如dijitButtonHover风格而不是:hover。

所以样式选项卡:hover技巧不起作用。

相反,您可以右键单击“HTML”选项卡中的“节点”(CSS类更改)和“断开属性更改”

在Chrome(版本35)中:

  • 检查元素
  • 在元素查看器中右键单击该元素。
  • select“Force element state” – >:active,:hover,:focus,:visited

对于CSS问题,我发现Web开发插件是非常宝贵的:

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

加载它,然后你有2个可能的工具在你的处置。

  1. 从任何moused-over元素上的文件inheritancecss,使用shift-ctrl-y

  2. 计算的CSS(包括任何内联样式=应用程序不在.css文件中 – 或通过从jquery等.css方法) – 按shift-ctrl-f

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

当然它还有其他很好的用处,比如对表单的高级debugging,包括对隐藏字段和cookie的编辑(可以用于渗透testing)

您也可以检查该元素,然后在样式选项卡上应该有一个下拉箭头。 它会有像“显示用户代理”,“扩大速记属性”,那么应该有2更多的下面(我猜你正在检查有hover状态的东西) :active:hoverselect:hover你应该是金黄的

我有同样的问题,并发现,虽然我不能用Firebug检查Firefox中的hover对象,Safari的Web检查员会冻结当前的状态,并允许检查。 要激活Safari的networking检查器,只需在terminal中input以下行并重新启动Safari:

 defaults write com.apple.Safari WebKitDeveloperExtras -bool true 

激活浏览器中的hover元素,然后右键单击并select“检查元素”。 该页面将冻结在当前状态,允许您检查转瞬即逝的对象到您的心脏的内容。

萤火虫没有完美的解决scheme(鼠标hover/hover模拟效果)。

但是,有几种方法可以在Firebug中编辑hover状态:

  1. 添加:active状态,以及您的:hover

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

    如果您将鼠标放在元素上,请将其拖放并释放,然后保持活动状态。

  2. :hover状态转换为.hover

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

    那么当然,你会添加(和删除)元素的.hover类。

我经常做一些替代的CSS或Javascript来“冻结”我的徘徊事件; 用Firebug调整到完美,并把我的hover放回原位。

是的,您可以在触发hover状态时右键单击“检查元素”。 这在Firebug和WebKit中适用于我。

我知道这篇文章有点旧了,但对于那些在Google上find这个的人,我创build了一个跨浏览器工具,只需要移动鼠标就可以看到你的HTML / CSS布局。 您可以轻松查看hover状态下的元素。

HTML Box Visualizer – GitHub

  • RegEx匹配除XHTML自包含标签之外的开放标签
  • devise一个锚点标签,看起来像一个提交button
  • 寻求一种优雅的,仅用于CSS的隐藏/显示自动高度内容的方法(包含转换)
  • WebForms UnobtrusiveValidationMode需要一个ScriptResourceMapping作为'jquery'。 请添加一个名为jquery的ScriptResourceMapping(区分大小写)
  • 将<ul> <li>放入div中
  • 如何使文本input不可编辑?
  • 如何正确引用HTML中的本地资源?
  • enctype ='multipart / form-data'是什么意思?
  • 哪个更好:<script type =“text / javascript”> ... </ script>或<script> ... </ script>
  • 为什么一个杂散的结束标记会生成一个空的段落?
  • 如何在CSSselect器中排除特定的类名?