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.
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: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.