如何使用铬网检查器查看悬停代码

使用 chrome web 检查器来查看代码是非常有用的。但是如何查看例如按钮的悬停代码呢?你必须将鼠标悬停在按钮上方,因此不能在检查器中使用它(鼠标)。是否有任何捷径或其他方法在检查员中实现这一点?

60139 次浏览

I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel. Another way is just press pause button in Scripts Panel and just hover the element. The debugger will stop at the first instruction of the first event handler.

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

It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.

Here's hoping they make this a little easier in future builds.

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.

In Chrome:

You can also mouseover on an element, and then click CTRL+SHIFT+C to inspect that element.

In Firefox:

enter image description here

in firebug:

enter image description here

source: https://stackoverflow.com/a/11272205/2165415

Please have a look on below link for answer

See :hover state in Chrome Developer Tools