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

Posted 2023-02-21

【中文标题】有没有办法在 Chrome 的 Inspector 中查看实时执行的 Javascript 函数（函数的名称）？

【英文标题】：Is there a way to see what Javascript functions (the name of the functions) execute in real time in Chrome's Inspector?

【发布时间】：2012-02-14 18:30:25

【问题描述】：

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

如果是检查器中的“配置文件”选项卡可以解决问题，那么您如何准确判断哪些函数会实时触发？

编辑 1/21/2012 12:36p Pacific： 从下面 Brian Nickel 的评论中，Inspector 中的 Timeline 选项卡是查看实时发生的事情的方式，但是您如何查看名称时间轴中执行的函数？

【问题讨论】：

实际实时有点没用，因为它太快了，无法跟上。在要监控的代码上设置断点。

我已经看到时间线中列出了各个函数。

我无法设置断点，因为它不是我的代码，我不知道在哪里设置断点。呵呵。这就是我想要弄清楚的！ @BrianNickel，你说的是哪个时间线？

@BrianNickel，啊啊啊啊，确实，时间线似乎就是这样！我之前没有注意到这一点。只需在时间轴中选择底部的“脚本”，然后按“记录”按钮，即可查看正在发生的一切！

@BrianNickel，我在时间线中看到“函数调用”的示例，但它似乎没有显示被调用函数的名称......我错过了什么吗？如果我能看到函数的名称，那就完美了！

【参考方案1】：

时间轴和脚本开发工具可用于实现这一目标。

打开开发人员工具面板，然后按时间轴下的记录开始跟踪活动。 触发您感兴趣的事件（即，在您的示例中，单击按钮），然后停止记录（或继续记录，但要知道您正在收集的数据量）。 注意时间轴面板中记录的全部内容。找到相关事件，然后单击该事件时间栏左侧的扭曲箭头。这将公开与该事件关联的函数调用。 单击函数调用右侧的链接可查看相关的 JavaScript。 （您要求提供函数名称，但请记住，该事件可能与匿名函数相关联，因此并不总是有可用的名称。） 如果要单步执行事件处理程序本身，请在处理程序声明之后的行插入断点（假设事件处理程序声明大于一行）。或者，在 Scripts 面板中展开 Event Listener Breakpoints 并检查适当的事件类型（如相关事件的 Timeline 面板中所列）。请注意，这种方法会在该事件的每个实例上中断，而不是您感兴趣的唯一调用。

如果您在使用缩小的 JavaScript 和插入断点时遇到问题（因为每一行都很长），这里有一个提示：通过下拉菜单在“脚本”面板中打开缩小的脚本文件，然后点击 。这将启用 Pretty Print，通过添加空格将缩小的代码扩展为更具可读性的内容。这使您可以更细粒度地插入断点。请注意，如果您现在返回到“时间轴”面板，脚本引用（例如，jquery.min.js:3）现在使用打印精美的行号，而不是缩小的、无空格的行号。

【讨论】：

我明白了，它会将您带到找到该函数的代码行。好的！我看到这适用于未缩小的代码，但如果你有一个包含一到三行所有内容的缩小代码，那么你就不走运了，因为可能在一行上定义了多个函数。我想这是我们现在最好的。如果它还添加了列数，而不仅仅是行数，那会很方便。例如，jquery.min.js:3:56 会比 jquery.min.js:3 更好。

实际上，有一个技巧可以解决这个问题。请看我修改后的答案。

完美。我也在想同样的事情，但周末不在我的电脑前。

【参考方案2】：

您可以使用很多不错的实用程序：console.trace();、debugger 等。

【讨论】：

这并没有提供在不修改代码的情况下实时查看调用了哪些函数的方法。