我在一个网站上加载了大约100-200个javascript函数。我想要确定当我在Google Chrome中单击一个或另一个项目时执行哪个javascript函数。如何使用Chrome Web开发人员工具完成此任务?谢谢!
发布于 2012-02-03 18:23:52
一个简单的方法是启动Chrome开发人员工具,切换到源代码面板,然后点击F8
(暂停执行)。这将在第一个执行的JavaScript语句时中断。
另一种方法是为mousedown或单击设置事件侦听器断点:在同一源面板中,展开右侧侧边栏中的“事件侦听器断点”。展开“鼠标”项并选中要中断的事件(例如“单击”、“鼠标按下”)。然后在页面中单击并在DevTools中查看JS执行中断。享受吧!
发布于 2015-11-24 04:24:35
暂停执行的替代方案(通常效果很好,但在频繁执行周期代码的页面上效果不佳)
您可以使用chrome的分析器进行短时间的记录。完成录制后,它将向您显示在录制过程中执行的任何函数所花费的cpu时间的摘要。我们并不真正关心cpu时间,我们只是使用这个工具,因为它会告诉我们执行了哪些函数。
基本上就是开始录制:
注:在Chrome 58及更高版本中,此选项卡重命名为"Memory“。Reference
然后执行您的操作(例如,单击网页上的按钮,或执行任何会导致感兴趣的代码执行的操作)。然后停止录制并查看结果:
请注意,我使用的是“自上而下”的查看模式--它向您显示调用堆栈,您可以深入查看最终调用了哪些函数。例如,某个匿名函数首先被调用(可能是setTimeout或某个单击事件处理程序的结果),然后它调用由s.track.s.t
标识的方法,该方法随后调用s_doPlugins
,因此on...The重要的是,在自上而下模式下,树顶部的条目形成调用堆栈的开始,因此它们通常是由一些计时器函数(setTimeout
、setInterval
、requestAnimationFrame
等)注册的函数。或者一些事件处理程序(click
、mousemove
、load
等)。
您还可以使用“图表”查看模式,该模式从左到右在图表上显示调用了哪个函数。这可以帮助你识别出你真正想要的是哪个函数,因为你可能知道代码在你的记录中的执行时间(例如,就在中间)。
顺便说一句,我相信大多数其他现代浏览器都有类似的功能。
https://stackoverflow.com/questions/9126723
复制相似问题