How can I inspect disappearing element in a browser?

(This answer only applies to Chrome Developer Tools. See update below.)

Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.

Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:

Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t @sulco on Twitter

An alternative method in Chrome:

• Open devTools (F12).
• Select the "Sources" tab.
• While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
• From this point, use Ctrl+Shift+C to select the element.

1. Open console
2. Type in setTimeout(()=>{debugger;},5000);
3. Press Enter

Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.

Useful tip to avoid repeating those steps above every time:

add this as a bookmarklet:

1. Bookmark any page
2. Edit this new bookmark
3. Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Next time you wish to use this, just click/tap this bookmark.

Verified in 2021

Do the following:

1. Open the console and navigate to Elements tab
2. Type command + shift + P (OSX) or control + shift + P (Windows)
3. Type the word focused
4. Select Emulate a focused page from the the menu

Now clicking around in the console will not close the element.