Transient elements

Follow this Chrome DevTools guide to learn how to enter debugging mode with a delay to inspect hard-to-catch elements.

Chrome DevTools Hotkeys Cheat Sheet

open DevTools - ctrl+shift+i / F12 on the keyboard or right-clicking anywhere on a page and selecting "Inspect"

pause script execution (Sources panel) - F8 or click the button in the top-right area of the panel

open Console - ctrl+shift+j or open DevTools first and go to the Console tab

start debugger with a delay (Console) - paste setTimeout(function() {debugger}, 3000) in the Console and press Enter (the delay value is in ms, i.e. 3000 = 3 sec. If you need more time, simply increase the number)

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:

1. open DevTools (ctrl+shift+i / F12 on the keyboard, or right-click anywhere on the page and choose "Inspect")

2. go to the "Sources" panel
3. 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.

Starting debugger with a delay

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.

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:

1. open DevTools (ctrl+shift+i / F12 on the keyboard, or right-click anywhere on the page and choose "Inspect")

2. go to the "Console" panel (you can also press ctrl+shift+j on the keyboard to immediately open the Console)
3. 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.