如何使用chrome web Inspector查看hover代码

Question

使用chromes web Inspector查看代码非常有用。但是，您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上，因此无法在检查器中使用它（鼠标）。在检查器中是否有任何快捷方式或其他方法可以完成此任务？

Answer 1

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

要在样式窗格中查看类似

:hover

的规则，请单击右上角的小虚线框按钮。

要强制某个元素进入

:hover

状态，请右键单击它。

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

Answer 2

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

Answer 3

这有点烦人，但您需要右键单击该元素，然后将鼠标悬停在链接上，使用键盘选择“检查元素”链接并按 Enter 键。这应该向您显示所选元素的悬停伪类的 css。

希望他们在未来的版本中能让这变得更容易一些。

Answer 4

在 Chrome 中：

您还可以将鼠标悬停在某个元素上，然后单击

CTRL+SHIFT+C

来检查该元素。

在火狐浏览器中：

在萤火虫中：

来源：https://stackoverflow.com/a/11272205/2165415

Answer 5

我不确定我是否正确理解您的问题，但如果您想查看事件处理程序代码，您只需检查元素并查看元素面板的事件侦听器侧边栏窗格。 另一种方法是按脚本面板中的暂停按钮并将鼠标悬停在元素上。 调试器将在第一个事件处理程序的第一条指令处停止。

Answer 6

请查看以下链接以获得答案

请参阅：Chrome 开发者工具中的悬停状态

Answer 7

我知道这是老问题

我所做的就是在控制台中运行它并快速悬停我需要检查的元素

setTimeout(function() {
  debugger; // this will stop all script on the page
}, 1000);

要释放此断点，请单击开发工具

Sources

选项卡中的“恢复脚本...”