Inspect and Style an Element in DevTools that Normally Disappears when Inactive

Elijah Manor
InstructorElijah Manor

Share this video with your friends

Send Tweet
Published 3 years ago
Updated 3 years ago

It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’s styles, however, it can be very tricky to try and inspect an element if it only shows up when it’s being hovered or if it disappears when it loses focus. Thankfully, there is a handy little trick using setTimeout and debugger that makes inspecting such elements much easier.

Instructor: [00:00] Here on the left, we have two elements that are pretty hard to style with devtools. The one at the top is an item that only shows an element when it is hovered. When you leave that item, it goes away. The one at the bottom shows another item when it is clicked, or right-clicked in this case, like a file menu, a context menu, or something like that.

[00:21] The element will only stay showing until you click away or tab off, if you are using the keyboard. If we wanted to come up and style the yellow box that shows on hover, for example, you might be tempted to just right click on it, but by the time you could inspect it, it goes away and is no longer in the DOM.

[00:39] Likewise, if you open up the context menu, you might be tempted to start styling the grey element, but by the time you click on it, it goes away as well, which is pretty frustrating and problematic. At this point you might find yourself having to hard-code your JavaScript, or tweak your CSS to keep the item displayed at all times.

[00:59] Another way you can handle this is to come into the console, you can hit the escape key while the devtools are in focus to bring up a console drawer and type a little snippet of JavaScript.

[01:09] What we'll do is call setTimeout and give it a function that will run the debugger statement, which will pause execution of the browser at that particular line of code. At first that sounds a bit odd, because we are not interested in JavaScript. We really want to style an element.

[01:28] If we could pause the JavaScript, that means we could inspect whatever element is showing at that point in time. It ends up being really helpful. setTimeout allows us to pick a delay value, which is the number of milliseconds that our function call should be delayed by.

[01:43] In our case, we should pick a number that allows us sufficient time to show the element we want to inspect and three seconds should be good enough. Once we execute the setTimeout, we quickly try to get into the state that we want to inspect. Then, we should be dropped into a debug session right where our debugger statement was written.

[02:03] Now, we're free to inspect whatever elements are in the DOM at this time. I can inspect the yellow hovering box and start tweaking its styles. For example, I can change the color to red, update the padding, and other changes. Once I am done, I could apply these changes to my JavaScript styles, or CSS files.

[02:24] When I am done, I could resume script execution. Likewise, we could open the console again, and pull up the previous command with the up arrow, execute our setTimeout, and this time we'll recreate the context menu.

[02:38] Now, we will escape out of our console, target the element in question, and start making tweaks, like making the mock screen and whatever other changes that we want to make. This ends up being a nice little trick to help you inspect those hard to reach elements.

[02:54] You could always choose whatever timeout you want, but three seconds has seemed to work pretty well for me.

~ 3 years ago

Also you can just press F8 or Cmd+\ to pause execution at any time (when DevTools panel is open)

Elijah Manor
Elijah Manorinstructor
~ 3 years ago

Yes, that is a handy trick however, I've had mixed results getting that to work for the above scenario.

Sometimes it'll work just great, but other times it'll hit a breakpoint only after the element has disappeared from view. It is a great trick to know, but for this particular situation I prefer the setTimeout/debugger approach as it has been more reliable for me.

~ 3 years ago

For reference in case anyone wants to copy paste the code...setTimeout(() => {debugger}, 3000);