4

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

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

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

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

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

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

4

3 回答 3

2

您可以使用 Chrome Dev Tools Javascript CPU profiler。

它会告诉您调用了哪些函数，以及由哪些其他函数调用。

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

于 2014-01-30T03:37:45.087 回答
2

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

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

$('#mybutton').click(doSomething);
于 2014-01-30T04:11:04.423 回答
1

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

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

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

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

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

  • 您可能jQuery会这样做minified，但没关系，prettifierChrome 开发工具上有一个（位于左下角的小 {} 按钮source panel）。

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

  • breakpoint现在在 while 循环之后创建一个e.currentTarget（在不同版本的 jQuery 中可能不同），然后按播放/恢复breakpoint （你的断点现在应该跳转到这一行）。

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

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

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

于 2014-02-16T04:13:44.353 回答