"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 (the dev tools need to be open prior to triggering the event). For example:

A sample Jsfiddle.

//Click anywhere
$('body').on('mousedown', function() {
    debugger;
});

//Space pressed
$(document).keypress(function(e) {
    if (e.which == 32) {
      debugger;
    }
});