有没有办法在Chrome的Inspector中实时查看Javascript函数(函数名称)的执行情况？

Question

例如,假设有someFunction()单击按钮时将执行的Javascript代码,然后单击该按钮.我想知道是否有某种方法可以看到它someFunction()刚刚执行.有没有办法实时查看Chrome中执行的功能？

如果是检查器中的"个人档案"选项卡可以实现这一目的,那么您究竟如何实时了解哪些功能实时触发？

编辑2012年1月21日12:36p太平洋:从下面的Brian Nickel的评论中,Inspector中的Timeline选项卡是查看实时情况的方法,但是如何在时间轴中看到已执行函数的名称？

Answer 1

Timeline和Scripts开发人员工具可用于实现此目标.

• 打开开发人员工具面板,然后按时间轴下的记录开始跟踪活动.
• 触发您感兴趣的事件(例如,在您的示例中,单击按钮),然后停止录制(或继续录制,但要记住您正在收集的数据量).
• 请注意时间轴面板中记录的entires.找到相关事件,然后单击该事件的计时栏左侧的扭曲箭头.这将公开与该事件关联的函数调用.
• 单击函数调用右侧的链接以查看相关的JavaScript.(您要求输入函数名称,但请记住,事件可能与匿名函数相关联,因此并不总是有可用的名称.)
• 如果要遍历事件处理程序本身,请在处理程序声明之后的行中插入断点(假设事件处理程序声明大于一行).或者,展开"脚本"面板中的"事件侦听器断点",然后选中相应的事件类型(如相关事件的"时间轴"面板中所列).请注意,此方法将在该事件的每个实例上中断,而不是您感兴趣的唯一调用.

如果您在使用缩小的JavaScript并插入断点时遇到麻烦(因为每行都很长),这里有一个提示:通过下拉列表打开Scripts面板中的缩小脚本文件,然后单击{}.这将启用Pretty Print,通过添加空格将缩小的代码扩展为更具可读性的内容.这允许您更精细地插入断点.请注意,如果现在返回"时间轴"面板,脚本引用(例如jquery.min.js:3)现在使用漂亮的行号,而不是缩小的,无空格的行号.