Chrome dev tools: finding the source of an event in the performance analysis tool?

Question

I'm trying to use the performance analyzer in the Chrome dev tools to find the source of a performance problem in my Javascript code.

From the analysis, it's very clear that the performance problem comes from repeated rendering operations triggered by mousemove events (I've attached a screenshot that shows this).

My problem is: how do I find the source of these mousemove events? Which HTML element(s) are they originating from? I didn't register ANY handlers for mouse events in my code at all, so it must be some framework I'm using, but I have no idea how to find out which one...

Answer 1

In Chrome dev tools you can set an event listener to mouseout events. That should help you find out which function triggers this event.

Edit: I created a basic "click" event in one of my angular components and I see the event when I unfold 1000 levels. So it should be hidden somewhere inside, but it's not pretty. I would go the route of setting a breakpoint and checking this directly. In my screenshot you can see that the click event originally came from the input.component.ts file.