Examine Element That is Removed onblur

Rightclick the node in the element tree -> Break on... -> Node Removal.

The debugger will now break before the node gets removed.


The trick I like to use is

  • Open up the sources panel

  • Display the tooltip

  • Use the keyboard shortcut to pause script execution. (Hover over the pause icon to find out the keyboard shortcut)

  • When the script execution is paused, go back to the Elements panel and inspect the tooltip as you are used to

enter image description here


I got it working by right clicking the parent node in the tree without focus & then

-> Break on... -> Subtree Modifications

Note that a page refresh doesn't clear this out, so might have to close & reopen the inspector if you have forgotten where you put your break point


All of these answers didn't really work for me.

At the time of writing (Chrome 92) you can use the Rendering settings in Chrome Dev Tools:

Open Chrome Dev Tools > Click the kebab menu > More tools dropdown > Rendering > Check emulate a focused page

This keeps the focus enabled whilst playing around in Chrome Dev Tools 🎉

Edit: 23/03/2022 - this is still the case in Chrome 99