如何在JavaScript函数调用发生时查看它们

Question

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

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

我错过了什么或者这不可能吗？

Answer 1

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

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

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

Google Chrome内置的开发人员工具提供了一个较小的子集 - 根据您的需要,其上的"配置文件"标签可能有用吗？

你究竟需要追踪这个JS函数到底是什么？我们可能会根据您的特殊需求为您推荐更好的工具.

是的,确实.但是您不需要设置断点,只需单击暂停按钮,然后执行要监视的操作 (5认同)
如果我知道我正在寻找什么功能,调试器是一个不错的选择.但有时它并不像寻找onhover属性那么容易.例如,您可以使用JQuery将函数附加到具有特定类的所有元素.我正在寻找没有具体的东西.我只想查看像facebook这样的页面来源,并试着弄清楚发生了什么.查看调用哪个函数会非常有用. (3认同)

Answer 2

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

要使用分析器,只需转到"控制台"选项卡,然后单击"配置文件"按钮.然后使用您的应用程序或重新加载页面,然后再次单击"配置文件"按钮.然后,您将看到详细的报告,其中显示了所调用的函数以及每个函数所花费的时间.