Debugging popups, modals & animations in Chrome Dev Tools

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!

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! 🐛