Debugging DOM events on your application

Today I found out that you can debug various DOM events on chrome dev tools (Didn't try other browsers).

Scenario:

I was working with a date-time-picker plugin. I needed to override the plugin's default styles to match the application styles. So for that, I needed to see what classes the plugin used.

But I couldn't do it as when I hover on the plugin it shows the calendar-like dropdown. When I remove the mouse from there the calendar was getting removed from the DOM. So I was facing a hard time debugging in the Elements section. As this behavior is not based on CSS HOVER (It's based on mouseover event), I was failing to get that calender's HTML code to see the class.

Then I looked at chrome dev-tool's Source > Event Listeners Breakpoint and checked the mouse events. It paused the execution and gave me the opportunity to debug.