Chrome devtools，监视何时附加事件处理程序？

Question

我正在尝试监控生产环境中的一些性能。 JS 被缩小和丑化了，所以我不能轻易地在绑定事件的函数上设置断点。

我在 Chrome 开发工具中看到，当我检查特定元素时，我还可以看到绑定的事件处理程序。

是否可以设置一个计时器或创建某种监视器来告诉我事件处理程序附加到元素（在页面加载时）需要多长时间。

谢谢

Answer 1

在 DevTools 的控制台 API 上查看 console.time 和 console.timeEnd： https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel

我会将时间放在代码的第一行，并将 timeEnd 放在附加事件函数中。

另外请注意，DevTools 可以在一定程度上美化您的代码，当您在源面板中时，单击 DevTools 窗口左下角的{} 按钮。