~1 min read|
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 Dev Tools 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:
F8if 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!