如何调试 CSS/Javascript 悬停问题
我经常发现自己想要调试 CSS 布局问题，这些问题涉及 Javascript 响应悬停事件或由于 :hover 选择器而应用不同 CSS 规则而引起的 DOM 更改。
通常，我会使用 Firebug 检查给我带来麻烦的元素，看看它的 CSS 属性是什么，以及这些属性来自哪里。 然而，当涉及到悬停时，这就变得不可能了，因为一旦你把鼠标移到 Firebug 面板上，你感兴趣的元素就不再悬停了，适用的 CSS 规则也不同了，并且（在这种情况下） JS 悬停）DOM 被更改。
有什么方法可以“冻结” DOM 的状态和 :hover 的应用程序，以便在悬停事件期间检查 DOM？
当然，关于如何调试此类问题的任何其他想法都是受欢迎的。
I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector.
Normally, I'd use Firebug to inspect the element that's giving me trouble and see what its CSS properties were, and where those properties come from. However, when hovering is involved, it becomes impossible, because as soon as you move your mouse down to the Firebug panel, the elements you're interested in are no longer hovered, the CSS rules that apply are different, and (in the case of JS hovers) the DOM is changed.
Is there any way I can "freeze" the state of the DOM and application of :hover in order to inspect the DOM as it was during a hover event?
Any other ideas on how to debug this sort of issue are welcome, of course.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（15）
您可以在 Firebug 中执行此操作，但它有点“错误”。 如果您检查该元素，然后单击 html 选项卡，例如 DOM 选项卡，当您返回 html 选项卡时，右侧的“样式”CSS 选项卡将有一个箭头下拉选择器，您可以在其中选择:该元素的悬停状态为活动状态。 很糟糕必须切换选项卡才能显示它，但它对我有用。
You can do this in Firebug but its a little "buggy". If you inspect the element and then click off the the html tab, to the DOM tab for instance, when you go back to the html tab the "style" css tab on the right will have an arrow drop down selector where you can select the :hover state of that element to be active. Sucks to have to switch tabs to get it to show but it works for me.
检查链接时，Firebug 显示默认 CSS 状态，即应用于 a:link 的样式。 默认情况下，不显示 :hover 和 :active 样式。 幸运的是，您可以通过单击“样式”并选择适当的选项来更改链接的状态：
When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:
将
onmouseover函数处理程序添加到采用:hover的元素。 在该函数内，对您想了解的任何元素调用console.info(element)。当您在 Firebug 处于活动状态时运行此命令时，该元素将可在 Firebug 控制台中进行检查。
Add an
onmouseoverfunction handler to the element that is taking the:hover. Inside that function, callconsole.info(element)on whichever element you'd like to know about.When you run this with firebug active, the element will be available to inspect in the firebug console.
在 Firebug 中，在 HTML 视图中，查看右侧面板并找到“样式”选项卡。 单击向下箭头并选择
:hover。In firebug, while in the HTML view, look to the right-side panel and find the "Styles" tab. Click the down arrow and select
:hover.在 Chrome（版本 35）中：
In Chrome (version 35):
在 Firefox (v33.1.1) 中：
In Firefox (v33.1.1):
一些 JavaScript 工具包（例如 Dojo）使用 CSS 类（例如 dijitButtonHover）来设置样式而不是 :hover。
所以“样式”选项卡：悬停技巧不起作用。
相反，您可以右键单击 HTML 选项卡中的节点（CSS 类发生更改），然后选择“属性更改时中断”
Some JavaScript toolkits, such as Dojo use CSS classes such as dijitButtonHover to style rather than :hover.
So the Style tab :hover trick doesn't work.
Instead, you can right-click the Node (who's CSS classes change) in the HTML tab, and "Break on Attribute Change"
对于CSS问题，我发现Web开发人员插件非常有价值：
http://chrispederick.com/work/web- Developer/
加载它，然后您就有 2 个可用的工具可供使用。
从任何鼠标悬停元素上的文件继承CSS，使用shift-ctrl-y
计算的CSS（包括任何内联style=apply 不在 .css 文件中 - 或通过 jquery 等中的 .css 方法） - 按 shift-ctrl-f
后者也会返回应用于该元素的所有类。
当然它还有其他伟大的用途，例如出色的表单调试，包括隐藏字段和 cookie 的编辑（可用于渗透测试）
for css issues, i find web developer plugin invaluable:
http://chrispederick.com/work/web-developer/
load it, then you have 2 possible tools at your disposal.
inherited css from files on any moused-over element, use shift-ctrl-y
computed css (incuding any inline style= applied that is not in a .css file - or through a .css method from jquery etc) - press shift-ctrl-f
the latter would also return all classes applied to the element.
of course it has other great uses such as, superb debugging of forms, including of editing of hidden fields and cookies (which can be used for penetration testing)
您还可以检查该元素，然后在样式选项卡上应该有一个小下拉箭头。 它将有类似“显示用户代理”、“扩展速记属性”之类的内容，然后下面应该还有 2 个（我猜您正在检查具有悬停状态的内容）
:active和:hover选择:hover，你应该是金色的。You can also inspect that element, then on the style the tab there should be a little drop down arrow. It will have something like "Show User Agent", "Expand Shorthand Properties", then there should be 2 more under that (I'm guessing that you are inspecting something that has a hover state)
:activeand:hoverselect the:hoverand you should be golden.在较新的 Firefox 版本（至少 v57 及更高版本）中，检查器的 UI 与发布其他答案时略有不同。 要启用并冻结元素的
:active/:hover/:focus状态，请检查它（右键单击 -> 检查元素）并在检查器中单击：结果：
来源（图像已获得 Mozilla 贡献者 CC-BY-SA v2.5 许可）
In newer Firefox versions (at least v57 and above), the inspector's UI is slightly different than when the other answers were posted. To enable and freeze the
:active/:hover/:focusstate of an element, inspect it (right click -> Inspect element) and in the inspector click on:Result:
Source (images are licensed under CC-BY-SA v2.5, The Mozilla Contributors)
我遇到了同样的问题，发现虽然我无法使用 Firebug 检查 Firefox 中的悬停对象，但 Safari 的 Web Inspector 会冻结当前状态并允许检查。 要激活 Safari 的 Web 检查器，只需在终端中输入以下行并重新启动 Safari：
激活浏览器中的悬停元素，然后右键单击并选择“检查元素”。 该页面将冻结在当前状态，让您可以随心所欲地检查转瞬即逝的物体。
I had the same problem and found that whilst I couldn't inspect hover objects in Firefox with Firebug, Safari's Web Inspector would freeze the current state and allow inspection. To activate Safari's web inspector just enter the following line into the terminal and restart Safari:
Activate the hover element in the browser, then right click and select 'Inspect Element'. The page will freeze in it's current state allowing you to inspect the fleeting objects to your heart's content.
firebug中没有完美的解决方案（鼠标悬停/悬停模拟效果）。
但是，有几种方法可以在 Firebug 中编辑悬停状态：
添加
:active状态以及:hovera:hover, a:active { ... }如果您将鼠标放在元素上，拖动并释放，它会保持活动状态。
将
:hover状态转换为.hover类您可以通过单击源文件（在 Firebug 的“样式”选项卡中）来编辑 CSS 规则
然后，当然，您可以从元素中添加（并删除）
.hover类。There is no perfect solution (mouseover/hover-simulation effect) in firebug.
However, there are a couple ways to edit your hover state in firebug:
Add an
:activestate, along with your:hovera:hover, a:active { ... }If you mouse down on your element, drag off and release, it remains active.
Turn the
:hoverstate into a.hoverclassYou can edit the CSS rule by clicking on the source file (in Firebug's Style tab)
Then of course, you'd add (and remove) the
.hoverclass from your element.我经常制作一些替代 CSS 或 Javascript 来“冻结”我的悬停事件； 使用 Firebug 将其调整至完美，然后将我的悬停放回原位。
I often make some alternate CSS or Javascript to "freeze" my hovered event; tweak it to perfection with Firebug and put my hover back in place.
是的，您可以在触发悬停状态时右键单击“检查元素”。 这在 Firebug 和 WebKit 中对我有用。
Yes, you can right-click "Inspect element" when triggering the hover state. This worked for me in Firebug and WebKit.
我知道这篇文章有点旧，但对于那些在 Google 上找到这篇文章的人，我创建了一个跨浏览器工具，让您只需移动鼠标即可可视化 HTML/CSS 布局。 您可以轻松查看处于悬停状态的元素。
HTML Box 可视化工具 - GitHub
I know this post is a bit old, but for those who find this on Google, I created a cross browser tool that allows you to visualize your HTML / CSS layout just by moving the mouse. You can easily view elements in their hover state.
HTML Box Visualizer - GitHub