How to Debug CSS/JavaScript Mouse or Hover Events

January 11, 2021

I am writing this post because I often forget about this particular tip.


You're working on an issue the requires to debug or style an element on a page that ONLY appears in the course of a hover or mouse-over event. However, when the event is not occurring, the element you want to work with does not exist in the DOM.

That's a problem, ain't it?

Here's a great tip I picked up years ago, and I have never documented myself because it's not problem I run into daily. I wish I knew who to attribute this to you.

To fix this problem, open your DevTools and write the following in the console.

setTimeout(() => {debugger;}, 5000)

Adjust the time accordingly, but you should have 5 seconds to cause the mouse-over or hover event to occur. The debugger will kick in, preventing future updates to the DOM until you continue.

Yay! You can now inspect the proper elements and make your changes.

SignalR Mastery: Become a Pro in Real-Time Web Development

Join the thousands of developers who have already taken their first steps into building real-time web applications with SignalR.

The best SignalR Course I've ever watched ever. explaining all the details you need to know and even more about SignalR technology.
Exactly what I am looking for. Really appreciate the real world scenario. Thank you.
The author of the course really shows he knows what he is talking about. Very awesome!