Question

每隔一段时间我就会拥有巨大的jQuery事件处理程序，如： -

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

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

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

它不一定是开发工具。它也可以是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

所以，我找到了一种方法来让Dev工具在不使用任何类型的console.log（s）的情况下执行此操作。

这就是你所做的（我将讨论Chrome Dev Tools，但Firefox也应该类似）

打开开发工具并转到Source Panel。
在您的右侧应该有Event Listener Breakpoints，然后点击鼠标 - >点击以启用点击事件的任何断点。 （你可以选择你自己的事件。在这种情况下我正在做点击事件）
如果您的脚本是minified和bundled，那么只需跳过此过程。继续并点击要查找功能的元素。它应该触发breakpoint，你将被带到启用click事件的脚本（在我的情况下通常是jquery，你可能需要做几次Step Over才能获得jQuery文件）
您的jQuery可能是minified但是没关系，Chrome开发工具上有一个prettifier（左下方的小{}按钮source panel）。
现在按Ctrl+Shift+O （这会在开发工具上搜索您的函数名称）并输入dispatch（对我而言，这是我们自定义函数的所有触发器似乎正在发生。
现在在breakpoint后面的while循环上创建一个e.currentTarget（在不同版本的jQuery中可能会有所不同），然后按play / resume breakpoint （你的断点现在应该跳到这一行）。
现在只有Step Ins （可能更多），它会带您进入调用此事件的函数。

这不是一个完美的解决方案，但它可以帮助您搜索项目中的所有文件。

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

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

3 个答案: