---
title: "Freeze any hover state with one line of JavaScript"
description: "The setTimeout(debugger) trick: pause the page mid-hover so you can finally inspect tooltips, dropdowns, and other hover-only elements in the Elements panel. Comes with a bookmarklet to do it in one click."
date: "2026-01-16"
tags: ["devtools", "debugging", "css", "bookmarklet"]
---

Some elements only exist while you're hovering. A tooltip, a dropdown, a custom
cursor, the `:hover` styles on a button. The second you move your mouse toward
the DevTools panel to inspect one, it's gone. You can't select what won't stay
on screen.

There's a one-line trick for this that's been quietly passed around for years:

```js
setTimeout(() => { debugger; }, 3000);
```

Open the console, run it, then hover the thing you care about. After three
seconds the `debugger` statement trips, the JS event loop stops, and the page
freezes mid-state. The tooltip is still open, the dropdown still expanded, the
`:hover` styles still applied. Now you can dig around the Elements panel as long
as you like.

## Try it

Drag this to your bookmarks bar, or copy it. Pick how long you need to get your
mouse into position:

It drops a small countdown badge so you know how long you've got, then freezes.
Click it on any page, mouse over the hover-only element, and wait.

## Why it works

`debugger;` is a real JavaScript statement. When DevTools is open, it behaves
like a breakpoint on that line. Wrapping it in `setTimeout` buys you a few
seconds to move the mouse and trigger the transient state before execution
pauses.

Once the breakpoint hits, the whole event loop stops. Nothing re-renders, no
`mouseleave` fires, no animation advances. The DOM is suspended exactly as it
was, so your `:hover` and `:focus-within` styles (and any JS-driven open state)
stay put while you poke at them.

Two things to remember. DevTools has to be open or `debugger;` won't break. And
to start the page again, hit the resume button (▶) in the Sources panel or
press `F8`.

## When you don't need it

For plain CSS states, Chrome and Firefox can just force them. Select the element,
open the `:hov` menu in the Styles pane, and tick `:hover`, `:focus`,
`:active`, whatever you need. Cleaner, no freezing required.

The `debugger` trick earns its keep when the element *only exists* while you're
hovering: JS-mounted tooltips, portals, menus that unmount on `mouseleave`.
Forcing `:hover` can't bring back a node that isn't in the DOM yet. So freeze
first, then inspect.