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

Question

使用chromes web检查器查看代码非常有用.但是,您如何查看按钮的悬停代码？您必须将鼠标悬停在按钮上,因此无法在检查器中使用它(鼠标).在检查员中是否有任何捷径或其他方法可以实现这一目标？

Answer 1

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

要查看" :hover样式"窗格中的规则,请单击右上角的小虚线框按钮.

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

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

Answer 2

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

Answer 3

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

希望他们在以后的构建中使此操作变得容易一些。

Answer 4

在Chrome中：

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

在Firefox中：

在萤火虫中：

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