Add “Freeze page in 5 seconds” button to Inspector

Developer Tools
#1

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.

3 Likes
Why isn’t the topic I created listed in my activity
#2

I think this would be a wonderful and useful feature.

#3

Cool feature, nice to have.

#4

I only later realized that there’s already a simple way to do this:

  1. open devtools and switch to the debugger panel
  2. on the page, hover to reveal the popup
  3. press the keyboard command for pausing script execution (F8 on macOS)
2 Likes
#5

That’s a good tip.

Usually I try to inspect the relevant element then on the rules panel filter row, click :hov and figure out whether I need :hover, :active, or some other pseudoclass to make the thing stay open. Not always possible with pure CSS.

#6

this is something on chrome only, i cant not do this on firefox till now - Sep2022