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

Question

Most jQuery code uses anonymous functions, such as:

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

This works well, but doesn't do so well for debugging. I tried to find the source of some anonymous functions using both Firefox Firebug and Chrome's inspector, with the pause javascript functionality, but the actual code it calls is in the jQuery js file, and stepping through the code never tells what line, or even what .js file added that event. How can I see where the action is defined?

Answer 1

There's a Google Chrome/Firefox plugin that can allow you to see events as registered by jQuery or other (particular) libraries: Visual Event .

Similar question: Firefox extension to find out which Javascript event is bound to an inspected element?

Answer 2

Try using the non-minified version of jQuery and using the profile functionality in Firebug to find the exact line in the jQuery source that is being called on the occurance of an event in your code.

If your intention is to find the implementation of some jQuery selectors or functions implementation, please refer this amazing resource that does exactly that:
http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/

Answer 3

I'm not sure I'm fully in the context. But if you find the function as a value (for example among some object properties), you always can navigate to its source from the context menu in Chrome DevTools.

Answer 4

One thing I've found helpful is to give the event handler a name despite it not being called anywhere else. That way it's easier to identify it in profiling tools.

eg

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

Once event handlers all have names you can hack the jquery dev version to log the event and handler names. I add this in the event dispatch method just above 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);
});