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

Question

我在网站上加载了约100-200个javascript函数。 我想确定当我在Google Chrome中点击一个或另一个项目时执行的javascript功能。 如何使用Chrome Web开发人员工具执行此操作？ 谢谢！

Answer 1

一种简单的方法是启动Chrome开发者工具，切换到“源”面板并点击F8（暂停执行）。这将破坏第一个执行的JavaScript语句。

另一种方法是为mousedown设置事件监听器断点或单击：在相同的Sources面板中，展开右侧边栏中的“Event Listener Breakpoints”。展开“鼠标”项并检查要中断的事件（例如“点击”，“mousedown”）。然后在页面中单击并查看DevTools中的JS执行中断。享受！

Answer 2

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

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

基本上只是开始录制：

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

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

您还可以使用“图表”查看模式，该模式显示您在哪个时间调用了哪个函数，从左到右绘制在图表上。这有助于您确定您真正需要的功能，因为您可能已经了解代码在录制中执行的时间（例如，正好在中间）。

btw - 我相信大多数其他现代浏览器都具有相似的功能。

Answer 3

  

我想确定当我在Google Chrome中点击一个或另一个项目时执行的javascript功能。

现在有一个名为Visual Event的强大扩展程序。它只识别通过流行的js库（jQuery，YUI，MooTools，Prototype，Glow）和DOM Level 0事件设置的事件处理程序。