DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Debugging Disappearing Elements
Yair Even Or
Yair Even Or

Posted on

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.

devtools inspect button

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)
Enter fullscreen mode Exit fullscreen mode

debugger inside timeout gif

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": shortkeys options menu item
  3. Configure it as follows: shortkeys configuration
  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

Emulate focused page options in devtools

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

booyakasha

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.