DevTools Tips

Debug popups that appear on hover

Categories: Supported by:

As described in Debug popups that appear on hover using JS and in Debug popups that appear on hover using the debugger statement, there are ways to debug popups that appear on hover using JavaScript.

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:

  1. Open the Command Menu (Cmd+Shift+P or Ctrl+Shift+P).
  2. Type rendering and select the Show Rendering command. The Rendering tool appears at the bottom of DevTools.
  3. In the Rendering tool, scroll down and check the Emulate a focused page option. The webpage now has focus.
  4. Use DevTools to inspect and debug elements that only appear when focus is in the webpage.

The Rendering tool in DevTools, showing the Emulate a focused page option