在Chrome中的Javascript执行跟踪 – 如何？

我有〜100-200 JavaScript函数加载在一个网站上。 我想确定当我点击Google Chrome中的某个项目或另一个项目时，执行了哪些JavaScriptfunction。 我如何使用Chrome Web Developer Tools？ 谢谢！

Answer 1

一个简单的方法是启动Chrome开发工具，切换到来源面板，然后F8 （暂停执行）。 这将在第一个执行的JavaScript语句中断开。

另一种方法是为mousedown设置事件侦听器断点，或者单击：在同一个“源”面板中，展开右侧边栏中的“事件侦听器断点”。 展开“鼠标”项目，并检查您想要打破的事件（例如“点击”，“mousedown”）。 然后点击你的页面，看到DevTools中的JS执行中断。 请享用！

Answer 2

暂停执行的替代方法（通常效果很好，但在频繁执行周期性代码的页面上效果不佳）

您可以使用chrome的分析器来logging一段时间。 完成录制后，它将显示录制过程中执行的任何function的CPU时间总结。 我们并不关心CPU的时间，只是使用这个工具，因为它会告诉我们哪些函数被执行。

基本上只是开始录制：

然后做你的行为（例如，点击网页上的一个button，或做任何会导致有趣的代码执行）。 然后停止录制并查看结果：

注意我正在使用“自上而下”查看模式 – 向您显示调用堆栈，您可以深入查看哪些函数最终被调用。 例如，首先调用一些匿名函数（可能是因为setTimeout或者一些点击事件处理程序），然后调用s_doPlugins标识的一些方法，然后调用s_doPlugins等等。重要的是是在自顶向下模式下，树顶部的条目构成调用堆栈的开始，因此它们通常是由某个定时器函数（ setTimeout ， setInterval ， requestAnimationFrame等）事件处理程序（ click ， click ， load等）。

您还可以使用“图表”查看模式，该模式显示在哪个时间调用哪个函数，从左到右绘制在图表上。 这可以帮助您识别您真正需要查找的function，因为您可能对代码在logging中执行的时间（例如，正确的中间位置）有所了解。

顺便说一句 – 我相信大多数其他现代浏览器有相似的能力。

Answer 3

我想确定当我点击Google Chrome中的某个项目或另一个项目时，执行了哪些JavaScriptfunction。

现在有一个叫做Visual Event的很棒的扩展，就是这么做的。 它只识别通过stream行的js库（jQuery，YUI，MooTools，Prototype，Glow）和DOM Level 0事件设置的事件处理程序。