如何使用chrome web inspector查看悬停代码

Question

使用chromes web检查器查看代码非常有用。但是，您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上，因此无法在检查器中使用它（鼠标）。在检查员中是否有任何快捷方式或其他方法来实现这一目标？

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

希望他们在未来的构建中更容易实现这一点。

Answer 4

在Chrome中：

您也可以鼠标悬停在某个元素上，然后点击CTRL+SHIFT+C以检查该元素。

在Firefox中：

在萤火虫中

：

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

Answer 5

我不确定我是否正确理解您的问题，但如果您想查看事件处理程序代码，您可以只检查元素并查看Elements Panel的Event Listeners侧边栏窗格。 另一种方法是在Scripts Panel中按下暂停按钮，然后将元素悬停。 调试器将在第一个事件处理程序的第一条指令处停止。

Answer 6

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

See :hover state in Chrome Developer Tools