Chrome开发者工具：如何在性能分析工具中找到事件源？

Question

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

从分析结果来看，很明显性能问题来自于mousemove事件触发的重复渲染操作（我附上了一个截图来显示这一点）。

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

- Master_T

---

我猜你需要在控制台手动添加一个监听器，例如 window.addEventListener('mouseout', console.log)。 - wOxxOm

@wOxxOm：那段代码注册了一个监听器，它将在特定事件发生时对页面上的每个元素都触发...这怎么能帮助我呢？我需要找出哪个元素正在生成特定事件，或者至少找出已经注册了该特定事件的元素列表...我不明白添加新的监听器有什么用处？ - Master_T

啊，抱歉。再次查看您的屏幕截图，我发现问题并不是mouseout事件，因为它的“self”时间可以忽略不计，只有1毫秒。问题在于“Layout”更新，您可以通过单击图表中的该块，然后切换到devtools底部的“Summary”面板来检查它。 - wOxxOm

@wOxxOm：是的，你是对的。通过查看布局摘要，您可以找出哪一段代码启动了它，这很有用。但是，它仍然没有回答原始问题，“哪个元素生成了该mousemove事件”。 - Master_T

Answer 1

在Chrome开发工具中，您可以设置一个鼠标移出事件的事件监听器。这应该有助于找出触发此事件的函数。编辑：我在我的一个Angular组件中创建了一个基本的“点击”事件，并且当我展开1000个级别时，我看到了这个事件。因此，它应该隐藏在某个地方，但不太好找。我会设置断点并直接检查这个问题。在我的截图中，您可以看到点击事件最初来自input.component.ts文件。

- cloned

---

谢谢，这并没有回答我的问题，但是很有帮助。如果没有人能够找到一种正确的方法来查找性能分析工具中事件的来源（为什么这不是开发工具的默认功能，我不明白，如果您有一个生成开销的事件，您肯定想追踪源头...奇怪），我会将其标记为正确答案。 - Master_T

添加了一个示例，说明如何在性能选项卡中查看此内容。它确实存在，只是不太容易找到。哈哈哈 :D - cloned