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

我在网站上加载了约100-200个javascript函数。我想确定我在Google Chrome浏览器中单击一项或另一项时执行的JavaScript功能。我该如何使用Chrome Web开发工具？谢谢！

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

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

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

您可以使用chrome的探查器在短时间内进行记录。录制完成后，它将向您显示在录制过程中执行的所有功能所花费的cpu时间的摘要。我们并不真正在乎CPU时间，只是使用此工具，因为它将向我们显示执行了哪些功能。

基本上只是开始录制：

注意：在Chrome 58及更高版本中，此标签页已重命名为“内存”。参考

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

注意，我使用的是“自顶向下”查看模式-向您显示调用堆栈，您可以向下钻取以查看最终调用了哪些函数。例如，首先调用了一个匿名函数（可能是setTimeout或某些单击事件处理程序的结果），然后又调用了由其标识的方法s.track.s.t，然后再调用s_doPlugins诸如此类...重要的是在自上而下的模式下，在树的顶部的条目形成一个调用堆栈的开始，所以他们通常是由一些定时器功能注册的功能（setTimeout，setInterval，requestAnimationFrame等）或某些事件处理函数（click，mousemove，load，等。 ）。

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

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

我想确定我在Google Chrome浏览器中单击一项或另一项时执行的JavaScript功能。

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