如何找到jQuery事件的原始（匿名函数）来源？答案

【问题标题】：How to find the original (Anonymous function) source of jQuery events?如何找到jQuery事件的原始（匿名函数）来源？
【发布时间】：2012-10-09 13:56:38
【问题描述】：

大部分 jQuery 代码使用匿名函数，例如：

jQuery('someelements').someEvent(function() {
    // code here
});

这很好用，但在调试时效果不佳。我尝试使用 Firefox Firebug 和 Chrome 的检查器查找一些匿名函数的来源，并使用 pause javascript 功能，但它调用的实际代码在 jQuery js 文件中，并且单步执行代码永远不会告诉你是哪一行，甚至是什么.js 文件添加了该事件。如何查看操作的定义位置？

【问题讨论】：

您究竟是如何调试代码/您到底想做什么？您可以在函数内部设置断点。如果您想更轻松地捕获错误，可以为函数命名。
例如，我知道某个元素正在 jQuery().click() 上执行某些操作，但是在单击事件上暂停只会在堆栈跟踪中给我 jQuery。

标签： javascript jquery firebug anonymous-function google-chrome-devtools

【解决方案1】：

我发现有用的一件事是给事件处理程序一个名称，尽管它没有在其他任何地方被调用。这样更容易在分析工具中识别它。

例如

jQuery('someelements').someEvent(function someEventHandler() {
    // code here
});

一旦事件处理程序都有名称，您就可以破解 jquery 开发版本来记录事件和处理程序名称。我在ret = ... .apply()上方的事件调度方法中添加了这个

var handler = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler );
console.log("FIRE EVENT ", event.type, "HANDLER: ", handler.name||'Anonymous Function');

【讨论】：

【解决方案2】：

尝试使用jQuery 的非缩小版本并使用Firebug 中的profile 功能在jQuery 源代码中查找代码中发生事件时调用的确切行。

如果您的目的是找到一些 jQuery 选择器或函数实现的实现，请参考这个惊人的资源：
http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/

【讨论】：

不错！不幸的是，似乎没有办法从结果中排除 jQuery 和其他库 js 文件。
@NoBugs，为什么要排除 jQuery？
我通常对我正在调试的页面的几个函数感兴趣，而不是运行的许多不同的 jQuery 函数。
这是一个很好的技巧，但是 Firefox 在分析时经常崩溃（可能是 firebug 的插件太多？）在 Chromium/Chrome/Opera 中是否有任何等效项？

【解决方案3】：

有一个 Google Chrome/Firefox 插件可以让您查看由 jQuery 或其他（特定）库注册的事件：Visual Event。

类似问题：Firefox extension to find out which Javascript event is bound to an inspected element?

【讨论】：

【解决方案4】：

jQuery('someelements').someEvent(function(e) {
    // code here
alert(e.target);
});

【讨论】：

【解决方案5】：

我不确定我是否完全了解上下文。但是如果你发现函数是一个值（例如在一些对象属性中），你总是可以从 Chrome DevTools 的上下文菜单中导航到它的源。

【讨论】：