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.
Let’s see it in action.
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.
Let’s see it in action.
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.
When the class attribute of the element is changed, we’ll have a JavaScript breakpoint triggered.
Let’s see it in action.
