Add “Freeze page in 5 seconds” button to Inspector

Inspecting temporary popups that display on mouse hover can be quite difficult. The element picker is not very compatible with such elements.

Developers can use advanced methods such as event listener breakpoints or DOM modification breakpoints, but that takes time and doesn’t always work.

From the web developer’s perspective, it would be ideal if the browser would just freeze the page while the popup is open, so that the developer can inspect the popup in peace.

One very effective method to achieve this is to paste the following code into the browser’s console and then trigger the popup and wait.

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

While developers can always type this code manually, I think it would be useful if DevTools had a convenient button that provided this feature with a single click. The process for inspecting temporary popups would become very simple:

  1. open devtools
  2. click “delayed freeze” icon button
  3. trigger the popup on the page
  4. wait a couple of seconds

Alternatively, instead of or in addition to the button, there could be a special keyboard command for running debugger.

4 Likes

I think this would be a wonderful and useful feature.

Cool feature, nice to have.