CODEWITHSUNDEEP
javascriptcssgoogle-chromegoogle-chrome-devtools
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Chrome devtools: inspect element on item that is visible only if parent has mouse over

I cannot find an element in the DOM with devtools.

The element appears only if I mouse over it's parent. In the code, on mouse over, with javascript, a lot of classes are added to different elements and only then my child element appears. (There are no hover events, only mouse over with js)

Because there are so many classes, I cannot add them manually. How can I inspect and debug elements in this context? Does Chrome provide any help?

Thanks!

Upvotes: 0

Views: 983

Answers (2)

zoku
zoku

Reputation: 7236

If your event is attached like so: document.getElementById('idOfYourElement').addEventListener('mouseover', function(){ console.log('hover'); }),

you can trigger events programmatically like so: document.getElementById('idOfYourElement').dispatchEvent(new Event('mouseover')).

If your mouse is outside the viewport it should stay in this state and you can debug in dev-tools.

Upvotes: 1

M0ns1f
M0ns1f

Reputation: 2725

Yes the Chrome devtools has the tool of handling hover/mouse over element see image :

enter image description here

Upvotes: 0

Related Questions