> For the complete documentation index, see [llms.txt](https://docs.dogq.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dogq.io/use-cases/transient-elements.md).
# Transient 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](https://developers.google.com/maps/documentation/places/web-service/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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dogq.io/use-cases/transient-elements.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.