Transient elements
Follow this Chrome DevTools guide to learn how to enter debugging mode with a delay to inspect hard-to-catch elements.
Last updated
Was this helpful?
Follow this Chrome DevTools guide to learn how to enter debugging mode with a delay to inspect hard-to-catch elements.
Last updated
Was this helpful?
Some elements can have a behavior pattern that makes inspecting them in DevTools tricky. Namely, custom elements implemented by the means of JavaScript and integrated elements, e.g., autocomplete menus, suggestion dropdowns, etc. are sometimes designed to only appear temporarily and will disappear from DOM when we click anywhere on the page or try to inspect them inside DevTools, i.e. they disappear on losing focus.
To inspect such elements we need to make the browser enter debugging mode, which will effectively freeze the UI state and allow us to select the targeted element.
To start debugger:
open DevTools (ctrl+shift+i / F12 on the keyboard, or right-click anywhere on the page and choose "Inspect")
go to the "Sources" panel
pause script execution (F8 or click the button in the top-right area of the panel)
At this point Chrome debugger has paused the UI state (you should see this message at the top of the page) and that pesky element can be inspected.
Let's take a look at the following example case.
A lot of applications today integrate Google Place Autocomplete to provide the type-ahead-search behavior of the Google Maps search field. These suggestion menus are removed from the DOM as soon we try to pause the UI state conventionally. To bypass that we need to use the setTimeout() function in DevTools Console.
To do this:
open DevTools (ctrl+shift+i / F12 on the keyboard, or right-click anywhere on the page and choose "Inspect")
paste the line setTimeout(function() {debugger}, 3000) in the Console
Once you've copied this into your Console and pressed Enter, you will have 3 seconds to make the menu you're interested in appear on the screen. If you need more time, simply increase the number (the delay value at the end is in ms, i.e. 3000 = 3 seconds). When you get the element in question appear on the screen, simply wait until the timer runs out and debugger freezes the UI state.
Oftentimes such transient elements will still disappear when we try to enter debugging mode by either pressing F8 on the keyboard or clicking the button. The trick here to use the debugger with a delay.
go to the "Console" panel (you can also press ctrl+shift+j on the keyboard to immediately open the Console)
