The above snippet uses a delay of 3 seconds (3000 milliseconds), which should be sufficient time to allow us to get the UI in a state to show the problematic element we want to inspect. SetTimeout let's us pick a delay value (in milliseconds) that determines when our debugger function will be called.
The trick is that if we can pause the JavaScript debugger, then we can inspect wahtever elements are showing at that point in time.
#How to inspect element chrome 2018 code
Well, as you may already know setTimeout executes a piece of code at another point in time and the debugger statement pauses execution of the browser at that particular line of code. The simple trick to make these elements comply is to pull up the DevTools console and execute the following snippet of JavaScript. I've actually adjusted code and/or CSS to keep these types of elements showing so I could inspect them, but there is an easier way to inspect them with just a small snippet of code. These above elements are so difficult to inspect because by the time you try to inspect them, they are no longer in the DOM. In the following Codesandbox there are two types of elements that can be difficult to inspect in a browser's DevTools.Įlements that display only when hovered and hide when you leave themĮlements that display when clicked (or right-clicked) like a fly-out menu, a context menu, or something like that and will only hide once you click away or tab off (if you are using the keyboard). Thankfully, there is a handy little trick using setTimeout and debugger that makes inspecting such elements much easier.
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.