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

Question

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

Answer 1

一种简单的方法是启动Chrome Developer Tools,切换到Sources面板并点击F8(Pause Execution).这将破坏第一个执行的JavaScript语句.

另一种方法是为mousedown或click设置事件监听器断点:在相同的Sources面板中,展开右侧边栏中的"Event Listener Breakpoints".展开"鼠标"项并检查要中断的事件(例如"点击","mousedown").然后在页面中单击并查看DevTools中的JS执行中断.请享用!

Answer 2

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

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

基本上只是开始录制:

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

注意我正在使用"自上而下"查看模式 - 它向您显示调用堆栈,您可以深入查看最终调用的函数.例如,一些匿名函数首先被调用(可能是由于setTimeout或者某些点击事件处理程序),然后它调用了一些方法s.track.s.t,然后调用它们s_doPlugins等等...重要的是在自顶向下模式,在树的顶部的条目形成一个调用堆栈的开始,所以他们通常是由一些定时器功能(注册的功能setTimeout,setInterval,requestAnimationFrame或者,等...),一些事件处理(click,mousemove,load,等. ).

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

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

Answer 3

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

现在有一个很棒的扩展名为Visual Event,就是这样做的.它只识别通过流行的js库(jQuery,YUI,MooTools,Prototype,Glow)和DOM Level 0事件设置的事件处理程序.