有没有办法知道事件正在调用哪个函数？

Question

每隔一段时间我都会有大量的 jQuery 事件处理程序，例如：-

$(document).on("click",".some-class", function(){
    //perform some action
});

附加到我页面上的元素。如果我的页面上的事件处理程序很少，这没问题，但是在一个巨大的应用程序上调试这些事件处理程序可能会让人头疼。我有时不知道在某些事件上调用了哪个回调。

所以，我的问题是，开发工具中是否有任何选项或技巧可以知道正在调用哪些函数？

它不一定是开发工具。它也可以是 javascript 或 jquery 技巧。

另外，我意识到我可以使用console.log、debugger; 甚至将console.trace() 放在我的回调函数中，但我想知道是否有更清洁和更智能的东西。

Answer 1

您可以使用 Chrome 开发工具 Javascript CPU profiler。

它会告诉你哪些函数被调用，以及被哪些其他函数调用。

虽然我怀疑你会发现console.log 更容易。

Answer 2

来过这里很多次了，我推荐console.log()在每个函数的开头。然后查看这在控制台上创建的跟踪。对于选择不必要地多次触发的事件非常有用。

// Your function
function doSomething(event) {
 console.log("doSomething(event)", event.currentTarget);
 // code for doSomething
}

$('#mybutton').click(doSomething);

Answer 3

因此，我找到了一种无需使用任何类型的 console.log(s) 即可让开发工具执行此操作的方法。

这就是你所做的（我将谈论 Chrome 开发工具，但 Firefox 也应该类似）

• 打开开发工具并转到Source Panel。

• 在你的右边应该有Event Listener Breakpoints，继续并单击鼠标->单击以启用单击事件的任何断点。 （您可以为此选择自己的事件。在这种情况下，我正在做点击事件）

• 如果您的脚本是 minified 和 bundled，则跳过此过程。 继续并单击要在其上查找函数的元素。它应该触发breakpoint，您将被带到启用点击事件的脚本（在我的情况下通常是jquery，您可能需要执行几个Step Over才能到达jQuery文件）

  李>

• 您的jQuery 可能是minified，但没关系，Chrome 开发工具上有一个prettifier（source panel 左下方的小 {} 按钮） .

• 现在按 Ctrl+Shift+O （这会在开发工具上搜索您的函数名称） 并输入 dispatch（对我来说，这似乎是我们自定义函数的所有触发器发生的地方.

1234563这一行）.

• 现在只有很少的Step Ins （可能更多）它会带你到调用这个事件的函数。

这不是一个完美的解决方案，但它比搜索项目中的所有文件更胜一筹。

如果有人有更好的解决方案，那么我会将答案更改为最简单的答案。