How to Debug Hover-Only Elements in Chrome That Disappear on Inspect

If you’ve ever tried to inspect a DOM element that only shows up on hover, you know the struggle. The moment you click to inspect it, it disappears—unmounted from the DOM like it was never there. Super frustrating. Here’s a simple hack that works every time: paste the following snippet into your

Chrome console:

setTimeout(() => { debugger; }, 5000);

How to use it:

1. trigger the hover state so the element appears,
2. then wait for the timer to hit.

When it does, Chrome pauses JavaScript execution at the debugger; statement. Now you can inspect the element safely check its DOM structure, event handlers, or any state without it vanishing.

Pro tip:

save this snippet in Chrome → Sources → Snippets so you can reuse it anytime. Trigger hover, run the snippet, and debug—done.

Why it works: the debugger; statement freezes JavaScript in place, keeping hover-only elements visible while you inspect them. This is simpler and faster than forcing :hover in DevTools or using other complicated tricks. Fast, reusable, and perfect for frontend devs tired of disappearing elements.