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

Question

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

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

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

Answer 1

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

类似的问题： Firefox扩展找出哪个Javascript事件绑定到受检查的元素？

Answer 2

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

如果您打算查找某些jQuery选择器的实现或函数的实现，请参考此功能惊人的资源，它确实做到了：
http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/

Answer 3

我不确定我是否完全了解上下文。 但是，如果您将函数作为值（例如，在某些对象属性中）找到，则始终可以从Chrome DevTools的上下文菜单中导航至其源。

Answer 4

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

例如

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

一旦事件处理程序都具有名称，您就可以破解jquery dev版本以记录事件和处理程序名称。 我在ret = ... .apply()上方的事件分派方法中添加此ret = ... .apply()

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

Answer 5

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