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

问题描述

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

解决方案

现在您可以看到伪类样式规则并迫使他们在元素上。

要在样式窗格中查看像：hover 这样的规则，请点击右上角的小型虚线框按钮。

要将元素强制为：hover 状态，请右键单击它。

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

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?

解决方案

Now you can see both the pseudo-class style rules and force them on elements.

To see the rules like :hover in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

这篇关于如何使用chrome web inspector查看悬停代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！