在 Firebug 或 Chrome DevTools 中检查悬停状态

Posted 2023-03-06

【中文标题】在 Firebug 或 Chrome DevTools 中检查悬停状态

【英文标题】：Inspecting Hover-state in Firebug or Chrome DevTools

【发布时间】：2012-05-23 00:08:26

【问题描述】：

我有一个具有 CSS 悬停状态的 html 元素。悬停时的边距或填充有一个错误，每次我将鼠标悬停时，元素的内容都会滑动一点，这很烦人。

我想使用 FireBug 或 Chrome 开发工具进行调试，但我在使用这些工具时遇到的一个常见问题是，在我从 Firebug/devtools 中选择元素后，我显然需要将鼠标移回开发工具并且悬停状态不再启用。

当元素处于悬停状态时，如何使用这些工具检查/调试 HTML 元素？

【问题讨论】：

For firebug hover and active state

【参考方案1】：

现在您可以看到伪类样式规则并将它们强制用于元素。

要在样式窗格中查看 :hover 等规则，请单击右上角的小虚线框按钮。

要强制元素进入 :hover 状态，请右键单击该元素。

或者，您可以使用“脚本”面板中的“事件侦听器断点”侧边栏窗格并选择在鼠标悬停处理程序中暂停。

【参考方案2】：

用于测试 Chrome 中的 :hover 状态

用于在Firefox 中测试:hover 状态（您需要添加firebug）

【参考方案3】：

这是萤火虫的屏幕截图和那些不够清晰，无法看到 agriboz 评论的人（比如我）

【参考方案4】：

Chrome 开发工具在元素 > 样式面板中有一个内置的 :hover 状态选择器。您也可以在此处切换其他伪类（如 :active）。

【讨论】：

同样在 Firefox 中，如果你想调试 DOM 而不是 CSS，你必须： 1) 按 F12 打开检查器 2) 选择调试器选项卡 3) 将你的元素悬停想要在 :hover 状态下进行检查 4) 按 F8 暂停调试器 5) 选择 DOM Inspector 选项卡 在暂停模式、JS、DOM 刷新、CSS 状态，但 CSS 动画时，一切都会停止。最重要的是在按 F8 时处于调试器选项卡中。