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!

A cursor hovers over the menu. Two extra lines of code appear in the code viewer, but disappear when the mouse moves away.
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! 🐛

Written by

Test Analyst, iOS Developer, Youth Worker & Coffee Lover. www.mitchwd.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store