Inspect the ninja element available on hover or focus

Sometimes you have a task to debug some element that is displayed on hover or focus. But it hides when clicked outside the viewport. For example, when you click somewhere in DevTools.

So, how to debug such ninja elements? Let’s use Chrome DevTools possibilities for that.

Toggle element state

The most general solution is to choose :hover state in the Toggle Element State panel.

Toggle Element State panel in DevTools.
It is hidden under the `:hov` button in a Styles drawer.

Let’s see it in action.

Just use `:hover` toggler.

Unfortunately, in many cases, enabling pseudo-classes is not enough.

Emulate a focused page

For pages that use JavaScript to toggle a focused state you can try to emulate focus on a page. Did you know that you can call a Command Menu with Ctrl Shift P (⌘ ⇧ P for macOS)? It has a command Emulate a focused page that can help us with our issue.

Command Menu in DevTools with `focu` typed.
It is also available with “Run command” command :)

Let’s see it in action.

Perfect case!

Break on attribute modifications

In some very strange cases, the hover state is set with JavaScript. And it is difficult to debug such cases because JS doesn’t handle a focus state. But we have a “hammer” for that.

"Break on..." menu in DevTools.
Right Click on a DOM-element, Break on..., attribute modifications.

When the class attribute of the element is changed, we’ll have a JavaScript breakpoint triggered.

Let’s see it in action.

The debugger freezes the page, so you can easily inspect all the elements.


Webmentions [?]

  1. Nikita Dubko

    Иногда бывает сложно выцепить в инспекторе какой-нибудь элемент, который прячется, когда кликаешь внутри DevTools. Собрал три способа, которые помогают мне в таких случаях.

  2. Vlad Sorokin

    Tip with emulating a focused page really seemed frankly helpful

  3. Artur Valeev

    Особенно полезно эту тему поковырять, если вы задумываетесь об a11y #FrontEnd

  4. Alex RW Nizhegorodsky


  5. Agney

    Something I get asked very often, I have something to point to now Nice work on the article.

  6. Misha

    Usually I just stop debugger with a hotkey and inspect frozen popup)