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

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.