It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’s styles, however, it can be very tricky to try and inspect an element if it only shows up when it’s being hovered or if it disappears when it loses focus. Thankfully, there is a handy little trick using setTimeout
and debugger
that makes inspecting such elements much easier.
Also you can just press F8 or Cmd+\ to pause execution at any time (when DevTools panel is open)
Yes, that is a handy trick https://umaar.com/dev-tips/178-quick-pause-script-execution/ however, I've had mixed results getting that to work for the above scenario.
Sometimes it'll work just great, but other times it'll hit a breakpoint only after the element has disappeared from view. It is a great trick to know, but for this particular situation I prefer the setTimeout/debugger approach as it has been more reliable for me.
For reference in case anyone wants to copy paste the code...setTimeout(() => {debugger}, 3000);