Set a Timed Debugger To Web Inspect Hard-To-Grab Elements
The DevTools (in any browser) are an invaluable development tool for CSS developers. If you need to see (and play with) the styles on any given element, a quick inspection is only a few clicks away.
Right click on something and “Inspect Element”, or, open DevTools and use its selection tools to grab what you need.
But… sometimes it can be difficult or impossible to target the element you need to target in the DevTools. The DOM events needed to work with the DevTools themselves can interfere.
Say I inserted an element on the mouseenter event of a certain other element, then removed it on mouseleave.
Try as I might, I just can’t target that newly-added element for inspection.
Chrome DevTools can simulate a :hover style, but that doesn’t really help us here. It doesn’t fire the DOM event, it just simulates the CSS state.
The trick is to fire a debugger; right when you need it
A debugger; statement, when the DevTools are open, kinda freezes the DOM. No more events are fired and script excecution is completely paused.
But… you can still use DevTools!
This is your opportunity to select that otherwise-impossible thing to select and do what you need to do. You can put that debugger; statement right in your code where you need it (remember DevTools has to be open for it to work). Or (Tim Holman taught me the trick) you can trigger it with a setTimeout() right from the console.
setTimeout(function() {
debugger;
}, 3000);
I tried this, and it works, in Chrome, Firefox, Edge, and Safari, so it’s a pretty cross-browser DevTools friendly trick. Only Chrome and Safari let you do mouse selection of elements while in debugger mode though, so in Edge or Firefox, you might have to do the drilling through the Elements tab to find what you need manually.
Set a Timed Debugger To Web Inspect Hard-To-Grab Elements is a post from CSS-Tricks
