2

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?

NoBugs
  • 9,310
  • 13
  • 80
  • 146
  • How exactly are you debugging the code / what exactly do you want to do? You can set a breakpoint inside the function. If you want to catch errors more easily, you can give the function a name. – Felix Kling Oct 19 '12 at 01:09
  • I know a certain element is doing something on jQuery().click(), for example, but pausing on the click event only gives me jQuery in the stack trace. – NoBugs Oct 19 '12 at 01:30

5 Answers5

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?

Community
  • 1
  • 1
JayC
  • 7,053
  • 2
  • 25
  • 41
1

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/

saji89
  • 2,093
  • 4
  • 27
  • 49
  • Nice! Unfortunately there seems to be no way to exclude jQuery and other library js files from the results. – NoBugs Oct 23 '12 at 01:35
  • @NoBugs, Why do you need to exclude jQuery? – saji89 Oct 23 '12 at 05:15
  • I'm usually interested in the few functions of the page I'm debugging, rather than the many different jQuery functions that ran. – NoBugs Oct 24 '12 at 05:36
  • That's a good trick, but often Firefox crashes when profiling (maybe too many addons to firebug?) Is there any equivalent in Chromium/Chrome/Opera? – NoBugs Nov 17 '12 at 05:38
0

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.

beefeather
  • 1,040
  • 5
  • 8
0

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.

e.g.

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');
Qazzian
  • 684
  • 6
  • 9
-1
jQuery('someelements').someEvent(function(e) {
    // code here
alert(e.target);
});
ARUNRAJ
  • 469
  • 6
  • 15