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?
相关问题
- Browsers render final comma of right-to-left (rtl)
- Chrome dev tools exact computed value for CSS rule
- Chrome dev tools exact computed value for CSS rule
- Change Chromium icon and “chrome” text to custom i
- debugging webgl in chrome
相关文章
- Is there a way to hide the new HTML5 spinbox contr
- Google Chrome Cache
- how to download a file on Chrome without auto rena
- Do all browsers on iOS use WKWebview or UIWebVIew?
- Why does Google Chrome NOT use cached pages when I
- Calling Chrome web browser from the webbrowser.get
- Stop automatic scrolling on page content change
- Ascii check mark is always red in mobile
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.
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.
In Chrome:
You can also mouseover on an element, and then click
CTRL+SHIFT+C
to inspect that element.In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
Please have a look on below link for answer
See :hover state in Chrome Developer Tools