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.
READER DISCOUNTSave $50 on terminal.training
I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.
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+
- Now in the console type
debugger- if you're not focused on the console, switch using ctrl or cmd +
]to move panels
If those steps weren't entirely obvious, I've included a video walk-through below:
Even better: don't resort to help that's hidden to the visitor by default!