CODEWITHSUNDEEP
cssgoogle-chromehovergoogle-chrome-devtoolsweb-inspector
Bo.
Bo.

Reputation: 1565

How to use chrome web inspector to view hover code

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?

Upvotes: 106

Views: 67334

Answers (7)

Dr.Neo
Dr.Neo

Reputation: 136

I know it is old question

What i do is run this in console and quicly hover the element i need to inspect

setTimeout(function() {
  debugger; // this will stop all script on the page
}, 1000);

to release this breakpoint click "resume script..." in Sources tab of dev tools

Upvotes: 4

T.Todua
T.Todua

Reputation: 56557

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

Upvotes: 5

Santosh Khalse
Santosh Khalse

Reputation: 12730

Please have a look on below link for answer

See :hover state in Chrome Developer Tools

Upvotes: 0

Travis Northcutt
Travis Northcutt

Reputation: 25036

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.

Upvotes: 164

purpletonic
purpletonic

Reputation: 1878

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.

Upvotes: 7

Yury Semikhatsky
Yury Semikhatsky

Reputation: 2354

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

Upvotes: 18

loislo
loislo

Reputation: 14129

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.

Upvotes: 1

Related Questions