inspect a hoverable event

2019-09-27

 | 

~1 min read

 | 

152 words

Some effects only appear when you hover over them with your mouse. The problem is that in order to see the details and ensure they’re what you inspect, you have to move your mouse … and oops! There goes the effect!

Interestingly, at least for some effects, using pseudo selectors in the DevToos doesn’t fix this problem. That is, I can’t find the element that has the onHover effect, mark it as in an hover state and then go about my business.

So what to do? Freeze the DOM by using the Debugger to pause the site.

Normally, breakpoints like this occur when they’re tripped by the code, but you can also use your keyboard.

The steps are pretty straightforward too:

  1. Open DevTools > Sources (this is where the debugger tools live)
  2. Press F8 (or Fn+F8 if you’re on a Mac)

You should now see a “Paused in debugger” banner.


Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!