Quick tip for debugging fleeting elements

Have you ever been in a situation where you want to inspect an element in the DOM, like a popover or a tooltip, but it disappears as soon as you open your dev tools because it only shows when hovering some other element on the page?

These types of components are also often rendered using portals, meaning they are completely removed from the DOM when not visible.

Sometimes you can get around this by temporarily modifying your code to force the element to be visible. That's not always feasible though. Maybe you don't have access to the code. Maybe you do but can't run it locally for some reason.

Time to break out the ol' browser debugger. Its ability to pause script execution is just what we need. Bring up your developer tools (F12), and head to the Sources tab. Now trigger your wily element and hit F8 (the keyboard shortcut for pausing script execution). The element will now stay put, and you can click on it with the element selector.

Note that if you want the element highlighter to work normally while you hover over nodes on the Elements tab, you need to resume script execution by going back to Sources and clicking the little play icon, or hitting F8 again.

And that's it. Now you can inspect and modify your popover as you would any other element.