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

Question

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

如果是检查器中的“个人档案”选项卡可以实现这一功能，那么您究竟如何确定实时触发哪些功能？

EDIT 1/21/2012 12:36p太平洋地区：根据Brian Nickel的评论，Inspector中的时间线标签可以实时查看实际情况，但您如何看待名称？在时间轴中执行的功能？

Answer 1

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

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

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

Answer 2

您可以使用许多优秀的实用程序：console.trace();，debugger等。