问Chrome中的Javascript执行跟踪-如何实现？

EN

一个简单的方法是启动Chrome开发人员工具，切换到源代码面板，然后点击F8 (暂停执行)。这将在第一个执行的JavaScript语句时中断。

另一种方法是为mousedown或单击设置事件侦听器断点:在同一源面板中，展开右侧侧边栏中的“事件侦听器断点”。展开“鼠标”项并选中要中断的事件(例如“单击”、“鼠标按下”)。然后在页面中单击并在DevTools中查看JS执行中断。享受吧！

暂停执行的替代方案(通常效果很好，但在频繁执行周期代码的页面上效果不佳)

您可以使用chrome的分析器进行短时间的记录。完成录制后，它将向您显示在录制过程中执行的任何函数所花费的cpu时间的摘要。我们并不真正关心cpu时间，我们只是使用这个工具，因为它会告诉我们执行了哪些函数。

基本上就是开始录制：

注:在Chrome 58及更高版本中，此选项卡重命名为"Memory“。Reference

​

​

然后执行您的操作(例如，单击网页上的按钮，或执行任何会导致感兴趣的代码执行的操作)。然后停止录制并查看结果：

​

​

请注意，我使用的是“自上而下”的查看模式--它向您显示调用堆栈，您可以深入查看最终调用了哪些函数。例如，某个匿名函数首先被调用(可能是setTimeout或某个单击事件处理程序的结果)，然后它调用由s.track.s.t标识的方法，该方法随后调用s_doPlugins，因此on...The重要的是，在自上而下模式下，树顶部的条目形成调用堆栈的开始，因此它们通常是由一些计时器函数(setTimeout、setInterval、requestAnimationFrame等)注册的函数。或者一些事件处理程序(click、mousemove、load等)。

您还可以使用“图表”查看模式，该模式从左到右在图表上显示调用了哪个函数。这可以帮助你识别出你真正想要的是哪个函数，因为你可能知道代码在你的记录中的执行时间(例如，就在中间)。

顺便说一句，我相信大多数其他现代浏览器都有类似的功能。