CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtools
Master_T
Master_T

Reputation: 7913

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

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...

enter image description here

Upvotes: 3

Views: 1528

Answers (1)

cloned
cloned

Reputation: 6742

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

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.

levels of performance

Upvotes: 2

Related Questions