"Freezing" page to inspect elements that react to cursor movements

Question

I am looking for a way to "freeze" a page so I could inspect elements that appear for example when I hover a field.

I am aware of the answers here : Firebug: How to inspect elements changing with mouse movements?

But this is limited to events triggered by the CSS :hover selector.

I am looking for a more general solution that would also work with elements displayed from Javascript.

Answer 1

One option would be to trigger the Chrome debugger upon a certain event. For example you could listen for the mousedown event on the document body, or a keypress, etc. The dev tools need to be open prior to triggering the event.

// Fire the debugger the first time you click on the page
document.body.addEventListener('mousedown', () => {
  debugger;
}, { once: true });

// Press space for the debugger
document.body.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    debugger;
  }
});

Another handy option suggested by MasterScrat is to use a timer:

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