"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.

you can just choose what to inspect from the `elements` pane in the inspector without actually using your mouse on any element — vsync, Jun 13 '14 at 11:51
@vsync yes but sometimes you *need* to use your mouse to have the relevant element show up, for example when hovering an element will load some data and display it using a JS callback. — MasterScrat, Aug 04 '14 at 11:19
in the inspector, you can check the "hover" state to be fixed. it's easier this way: http://www.sitepoint.com/firebug-css-active-hover-states/ — vsync, Aug 04 '14 at 11:29

Etheryte · Accepted Answer · 2014-06-13T12:04:55.237

5

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;
    }
});

edited Jun 13 '14 at 12:04

answered Jun 13 '14 at 11:49

Etheryte

24,589
11
71
116

2

Also, if you need to use the mouse to put the page in the state you want to inspect, you can run `setTimeout(function(){debugger}, 1500);` in the console and then you have 1.5s to click around before the page freezes. – MasterScrat Sep 19 '17 at 08:05

score 2 · Answer 2 · answered Jan 09 '20 at 14:37

Firefox has a "break on..." option in the inspector - right click on an element in the inspector, select "break on -> attribute modification" and then when you cause the DOM to be modified for that element, the debugger is invoked for you. You can then play with the inspector to see the changes with the one issue that the web page is frozen (ie and not selectable) but you can still select elements using the inspector.

score 2 · Answer 3 · answered Nov 22 '20 at 13:59

2

in Chromium, put mouse over the element then -> Ctrl-Shift + C

answered Nov 22 '20 at 13:59

Juanma Font

346
5
10

score 2 · Answer 4 · answered Feb 13 '21 at 16:16

2

With the Firefox Developer Tools opened (F12), select the Debugger tab. Pressing F8 is the shortcut to pause the execution of the page, which enables the inspection of displayed elements, including those displayed by Javascript.

answered Feb 13 '21 at 16:16

Sharasque

21
1

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

4 Answers4