Specific blog post title, eh? But very specific problem that’s a pain in the backside when it comes to debugging it.
How do you inspect an element that hides on mouse move? Such as a tooltip (though I’m not a fan of the UI element, if only for the lack of accessibility) it’s certainly not obvious.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
This is a short post on how to keep elements from hiding allowing me to inspect the elements in devtools.
I’m also afraid that this only works in Chrome - because Firefox triggers a mouse move at the point I want to capture the newly visible element and thusly hides again before I can debug.
Here are the steps:
-
Prepare by opening devtools and setting it open in a separate window (whilst in devtools, open the palette by using ctrl or cmd +
p- then type >undock) -
Now focusing on the browser window again, hover over the triggering element and leave the mouse pointer where it is
-
Using the keyboard switch focus to devtools - on a mac that’s cmd+
`(backtick), otherwise you can use the "Developer Tools" shortcut (again, mac is cmd+alt+I) -
Now in the console type
debugger- if you’re not focused on the console, switch using ctrl or cmd +[and]to move panels -
Now the browser is in a hung mode, no JavaScript can run, you’re free to inspect the exposed element and debug the CSS.
If those steps weren’t entirely obvious, I’ve included a video walk-through below:
That all said and done, I had to debug an existing system, but when it comes to hover effects, at the very least toggling a CSS class makes it a lot easier to debug. It also means it can be a default state of shown if there’s no JavaScript (for instance).
Even better: don’t resort to help that’s hidden to the visitor by default!
Published 9-Jul 2021 under #code. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/how-to-inspect-elements-that-hide-on-mouse-move.md)
π 22 likes
[](](](](](](](](](](](
Comments
Lock Thread
Login
Add Comment[M β Β Markdown]()
[Upvotes]()[Newest]()[Oldest]()
0 points
7 months ago
Nice!
0 points
16 months ago
I don’t know what kind of wizardry they pulled up but this technic or f8 or ctrl+\ did not work when inspecting a picker on an external site. So if anyone tries this without much success, make a [bookmarklet](https://caiorss.github.io/bookmarklet-maker/) with a single debugger; statement in it and press when the thing you want to inspect is open.
This worked for me in chrome, windows 10, in 2022
1 point
2 years ago
Nice tip. Another option would be to right-click on the body and add a DOM/attribute modification event breakpoint, the bonus doing it that way is you can stack trace the code too.
R
[Rafael Bardini](https://rbardini.com)
0 points
2 years ago
You can also use F8 or β \ to pause script execution.
0 points
2 years ago
Another method: DevTools → Element (Inspect) Panel → Right Click on Elment to Hover → Force State on :hover
0 points
2 years ago
Hover state only works for CSS based, this won’t for the JavaScript based mouse move driven showing.
[Commento](https://commento.io)