September 27, 2019
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:
F8if you’re on a Mac)
You should now see a “Paused in debugger” banner.
Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!