How can I inspect disappearing element in a browser?

Question

How can I inspect an element which disappears when my mouse moves away?

I don't know it's ID, class or anything but want to inspect it.

Solutions I have tried:

Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.

Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.

SUCCESS:

I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.

Answer 1

(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

Answer 2

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.