CSS Debugging Disappearing Elements

I'm going to share with you a trick so cool you'll be shocked ⚡️

But first, here's a little intro for those who have no idea what the subject of this post is for:

Some elements appear on the screen only when the user interacts with another element.

For example, a suggestions box appears when the user types text, or a dropdown is rendered when a menu item is hovered.

(Like the dropdown items of this MUI component)

Sometimes those dynamically appearing elements don't exist in the DOM until they are needed - for example, appearing when another element is being interacted with.

How can they be inspected? Since clicking the inspect button will cause those dynamically-added elements to disappear.

1. Timeout trick

Most developers are familiar with this trick, but for those who aren't - to "freeze" the DOM, execute a debugger command (within devtools console) inside a setTimeout with enough duration which lets you run around, do whatever you need to do, in order to show the evasive thing you wish to inspect:

setTimeout(() => { debugger; }, 3000)

While this is handy, it can be annoying to constantly run this command when you are constantly debugging some random CSS weirdness.

2. F8 in Devtools Sources panel

Hitting F8 while the Sources panel is open will freeze the DOM also and go into debugger mode.

3. Hotkeys automated debugger:

The above trick can be automated using a dedicated keyboard shortcuts (Chrome browser).

1. Install the shortkeys extension
2. Click on the extension icon and chose "options":
3. Configure it as follows:
4. Click "Save shortcuts" button (bottom-right)

Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.

4. Emulate a focused page with devtools:

1. Open Devtools
2. Hit Command + shift + P (OSX) or CTRL + shift + P (Windows)
3. Type focused
4. Select Emulate a focused page

Now interacting with devtools will not lose focus from the element which was focused.