Prevent Dev Tools from Closing Popover

Have you ever had to inspect an element in chrome dev tools, but whenever you click into dev tools the element closes?

For example: popover, tooltip. Mainly these two elements. It can be extremely annoying and elusive to inspect these, as they close whenever you move the focus to the dev tools panel.

Solutions:

Breakpoint

If you know where the popover element will appear in the element tree, you can find the parent element in chrome elements tab -> right click -> break on -> subtree modifications. This will pause JS execution whenever an element is added to that parent element, allowing you to inspect the child elements. The child elements in this case should be the popover + popover contents itself.

Manual Debugger

Sometimes you don’t actually know where in the element tree the popover element will be appended. Quite elusive! In this case, you can try this method.

You need to time things properly. Paste this into the console, executing the JS in this snippet:

setTimeout(() => {debugger;}, 3000)

Then, directly after pasting that, open the popover element in the dom through hover/click or whatever triggers it to be open. After 3 seconds, the debugger should hook in, and you can inspect the frozen dom.