How to inspect element on popover with unknown identity?

Question

I am running some browser tests on Chrome and cannot find a particular popover in my codebase.

I figured I could snag its name or ID via manual inspect element, but it of course disappears when I try to right click it.

Without much identifying information to go by (unless I try js things with surrouding divs I suspect it might live in?), how can I get a handle on this element?

Just to clarify, you mean how can you inspect an element that requires a, for example, hover over event? — simon, May 29 '15 at 14:34
this might be what you want: http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools — simon, May 29 '15 at 14:35

score 1 · Answer 1 · answered May 29 '15 at 14:38

If it's a hover event that is triggered, in inspect element you should be able to force the state. Right click the code in your inspect element and you should see things like :hover and :focus and maybe :active. Just select whichever one triggers the event, and you should be able to view the code.

score 0 · Answer 2 · answered May 20 '22 at 17:41

I found this useful when I needed to inspect a popover that disappeared on the next mouse click:

Inspect the element that triggers the popover (in my case an <a> that shows the popover when you click on it).
In the dev tools go to Elements view and, under there, Event Listeners.
Expand the blur event using the little arrow to the left of it.
Click "Remove" on any listeners under this event (or right-click and choose "Delete event listener". With no listeners for the blur event, the popover will no longer disappear when you click away from it.
Trigger the popover as usual. It will now stay there while you inspect any elements within it.

How to inspect element on popover with unknown identity?

2 Answers2