The main problem in debugging overlay elements, like popups, is that they disappear as soon as the page loses focus, for example after moving focus to the DevTools window.
Chromium-based browsers such as Chrome and Edge, provide a way to emulate a focused state on the webpage even if DevTools has focus.
To emulate a focused state on the webpage:
- Open the Command Menu (
- Type rendering and select the Show Rendering command. The Rendering tool appears at the bottom of DevTools.
- In the Rendering tool, scroll down and check the Emulate a focused page option. The webpage now has focus.
- Use DevTools to inspect and debug elements that only appear when focus is in the webpage.