Debugging popups, modals & animations in Chrome Dev Tools

Mitch Winkel-Davis
1 min readApr 4, 2020

Often, I’ll be trying to debug a popup, menu or timed animation- by hovering over the popup, then opening the dev tools, and then trying to look at the generated code in the Elements tab. But as soon as I move my cursor, the code disappears!

A cursor hovers over the menu. Two extra lines of code appear in the code viewer, but disappear when the mouse moves away.
Notice the two elements appear on hover, but disappear when the mouse moves away! How frustrating!

The quick fix?

  1. Open Chrome Dev Tools (Cmd + Option + I)
  2. Open the Console tab
  3. Paste the following, the hit enter:
    setTimeout(function(){debugger;}, 5000)
  4. Navigate to your popup and wait- in 5 seconds, the debugger will pause the page, and you can see your code!

Enjoy your debugging! 🐛