Chrome 开发工具：在性能分析工具中查找事件源？

Question

我正在尝试使用 Chrome 开发工具中的性能分析器来查找我的 Javascript 代码中性能问题的根源。

根据分析，很明显性能问题是由 mousemove 事件触发的重复渲染操作引起的（我附上了显示此内容的屏幕截图）。

我的问题是：如何找到这些 mousemove 事件的 source？它们来自哪个 HTML 个元素？我根本没有在我的代码中为鼠标事件注册任何处理程序，所以它一定是我正在使用的某个框架，但我不知道如何找出哪个...

Answer 1

在 Chrome 开发工具中，您可以将事件侦听器设置为 mouseout 事件。这应该可以帮助您找出触发此事件的函数。

编辑：我在我的 angular 组件之一中创建了一个基本的 "click" 事件，当我展开 1000 个关卡时我会看到该事件。所以它应该隐藏在里面的某个地方，但它并不漂亮。我会走设置断点并直接检查的路线。在我的屏幕截图中，您可以看到点击事件最初来自 input.component.ts 文件。