“Inspect” a hover element?

Question

Note: I\'ve read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.

I find \"Inspect Element\" an invaluable tool in C

Answer 1

I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.

So here's what I did:

1. Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).

Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.