如何查看发生的 JavaScript 函数调用答案

【问题标题】：How to view JavaScript function calls as they occur如何查看发生的 JavaScript 函数调用
【发布时间】：2011-04-15 02:30:38
【问题描述】：

是否可以在浏览器的 JavaScript 控制台中查看 JavaScript 函数调用？我知道你可以查看 XHR，但你可以查看函数调用吗？

例如，我将鼠标悬停在页面上的某个元素上，然后弹出一个 div。我知道有一个 JavaScript 函数被调用来显示弹出窗口，所以能够在控制台中查看这个调用会很好，这样我就可以看到调用了什么函数。

是我遗漏了什么还是不可能？

【问题讨论】：

【解决方案1】：

所以基本上你想实时查看 JS 调用？

Firefox 上的 Firebug 扩展提供了这一点 (http://getfirebug.com/javascript)。

基本上，您要做的是在代码中找到您的函数，然后在其上设置断点。然后，您应该能够单步执行它，就像普通的调试器一样。在上面找到与特定事件（例如鼠标悬停）相关联的 JS 函数应该不难——这个页面是使用直接 JS 还是框架？如果有，是哪一个？

Google Chrome 的内置开发者工具提供了一个较小的子集 - 根据您的需要，其上的“个人资料”选项卡可能有用吗？

你需要跟踪这个 JS 函数究竟是为了什么？我们或许可以根据您的特定需求为您推荐更好的工具。

【讨论】：

如果我知道我在寻找什么功能，调试器是一个不错的选择。但有时它并不像寻找 onhover 属性那么容易。例如，您可以使用 JQuery 将函数附加到具有特定类的所有元素。我没有什么具体的要求。我只是喜欢查看像 facebook 这样的页面的来源，并试图弄清楚发生了什么。查看调用了哪个函数会很有帮助。
是否是您的网站并不重要。下载 Firebug 并转到脚本选项卡 - 它允许您“暂停”执行，然后单步执行。它可以很快变得非常详细。请注意，尽管大多数实时代码通常会被缩小/混淆，因此可能是：v()->r();a=2;t++["$gg"]..... 等
@Chris 是的，我知道我可以在另一个站点上使用调试器，但我不知道我在寻找什么，因为我不知道调用了什么函数，所以设置一个断点不会有帮助的。正如你提到的，很多 javascript 都被缩小了，所以无论如何它都在一行上。
没错。但是你不需要设置断点，只需点击暂停按钮，执行你想看的动作
@Chris 谢谢！暂停按钮在 Firebug 中完美运行。在 Chrome 中，我似乎无法使其正常工作，并且我的扩展程序（如 adblock）妨碍了：/

【解决方案2】：

检查 Firebug Profiler，您可以使用它来查看正在发生的事情的细分，而无需手动添加 console.log 语句。

要使用分析器，只需转到控制台选项卡并单击“配置文件”按钮。然后使用您的应用程序或重新加载页面，然后再次单击“个人资料”按钮。然后，您将看到一份详细报告，其中显示了调用了哪些函数以及每个函数花费了多少时间。

【讨论】：

【解决方案3】：

除非您将该信息明确附加到 DOM，否则不会。

但是，您可以在某些浏览器的开发人员工具中设置断点，例如 Safari、Chrome 和 Firebug for Firefox。

【讨论】：