How can I inspect HTML element that disappears from DOM on lost focus?

Keep focus while navigating to console

If you want to inspect a disappearing element without triggering a focus loss, use the console. Here's the secret recipe:

1. Open Developer Tools (F12 or Cmd+Opt+I on Mac).
2. Go to the Console tab.
3. Type in document.activeElement.blur(); and hit Enter

Just like that, you have blurred the active HTML element without causing it to vanish from the DOM.

Trick to simulate focus states with DevTools

To manually simulate focus states, use Chrome DevTools' Toggle Element State feature:

1. Select the element to inspect with your mouse.
2. Open DevTools (F12) and head to the Elements tab.
3. Find the Styles pane to the right.
4. Click on the :hov icon to reveal Force Element State.
5. Check :focus to simulate the element being focused.

Voila! You've created a pseudo-focus state. Now you can cheerfully inspect and edit CSS properties.

Use breakpoints to inspect short-lived DOM changes

Sometimes, you need to handle transient changes in the DOM. Here's how:

1. Hit F12, open Developer Tools.
2. Switch to the Sources tab.
3. Click the line number where the DOM changes occur to set a breakpoint.
4. When your code hits the breakpoint, the action freezes—cue dramatic music!

With some fine-tuning, you can make the invisible visible—transform the blur into focus.

Optimize the focus while inspecting

To stabilize focus during inspection, use the Show Rendering tab. Here's how:

1. Launch DevTools with F12 or Cmd+Opt+I.
2. Press Cmd+Shift+P or Ctrl+Shift+P to open the Command Menu.
3. Type Show Rendering and hit Enter.
4. In the Rendering tab, tick paint flashing. Trust me, it makes tracking the elusive HTML elements way easier.