Skip to content

index.md

Latest commit

 

History

History
85 lines (63 loc) · 2.84 KB

index.md

File metadata and controls

85 lines (63 loc) · 2.84 KB
Raw
title Inspect the ninja element available on hover or focus
description Three ways to debug some element that is displayed on hover or focus.
cover images/cover.png
date 2021-12-09
dateUpdated Last Modified
tags
devtools
chunk

{% import "macros.njk" as macros with context %}

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.

{{ macros.img('./images/toggle-state.png', 'Toggle Element State panel in DevTools.') }} It is hidden under the `:hov` button in a Styles drawer.

Let’s see it in action.

{{ macros.video('./images/netlify@1440', 1440, 900, true, false) }} 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.

{{ macros.img('./images/emulate-focus.png', 'Command Menu in DevTools with `focu` typed.') }} It is also available with “Run command” command :)

Let's see it in action.

{{ macros.video('./images/yandex@1440', 1440, 900, true, false) }} 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.

{{ macros.img('./images/break-on.png', '"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.

{{ macros.video('./images/amazon@1440', 1440, 900, true, false) }} The debugger freezes the page, so you can easily inspect all the elements.

Materials