4

Every once in a while I'll have huge jQuery event handlers like:- 

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

that are attached to elements on my page. This is no problem if there are few events handlers on my page but on a huge application debugging these event handler can be a real pain in the neck. I'll have no idea at times on which callback is being called on certain events.

So, my question is, is there any option or trick in dev-tools to know which functions are being called?

It doesn't have to be dev-tools. It can be javascript or jquery trick too.

Also, I realize that I can do console.log, debugger; or even put console.trace() in my callback functions but I was wondering if there is something more cleaner and smarter.

shriek
  • 5,605
  • 8
  • 46
  • 75
  • This might be helpful to you! http://stackoverflow.com/questions/21181340/how-to-know-which-file-or-script-is-running-current-element – Bhojendra Rauniyar Jan 30 '14 at 03:37
  • That's somewhat helpful but doesn't pinpoint the line when there are multiple events on the same class. – shriek Jan 30 '14 at 04:03
  • possible duplicate of [How to find the original (Anonymous function) source of jQuery events?](http://stackoverflow.com/questions/12965998/how-to-find-the-original-anonymous-function-source-of-jquery-events) – NoBugs Jan 31 '14 at 02:37

3 Answers3

2

You can use the Chrome Dev Tools Javascript CPU profiler.

It will tell you which functions are called, and by which other functions.

Though I suspect that you will find console.log to be easier.

Paul Draper
  • 78,542
  • 46
  • 206
  • 285
  • CPU Profiler is something I haven't thought about. It'll be interesting if it really helped. – shriek Jan 30 '14 at 05:03
  • 1
    Firefox has a good built-in profiler, it will even show you a graph to narrow down what is doing many operations, at what time. – NoBugs Jan 31 '14 at 02:35
2

Been here many a time, I recommend console.log() at the begining of every function. Then look at the trace this creates on the console. Very useful for picking events that are firing multiple times needlessly.

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

$('#mybutton').click(doSomething);
Steven de Salas
  • 20,944
  • 9
  • 74
  • 82
  • 2
    Just wished there was more cleaner way to do this without populating code with logs everywhere. :/ – shriek Jan 30 '14 at 05:02
  • Yep agreed. Its a bummer, you can done one of these: a) run a `window.console = { log: function() {}};` statement in your prod environment to remove the logs, b) create a debugger class with a wrapper around `console.log` and call that instead, or c) use a release-time minimifyer that automatically strips all calls to `console.log` ([see this link](http://stackoverflow.com/questions/20092466/can-uglify-js-remove-the-console-log-statements)). – Steven de Salas Jan 30 '14 at 06:35
1

So, I sort of found a way to get Dev tools to do this without using any kind of console.log(s).

This is what you do (I'll be talking for Chrome Dev Tools but Firefox should be similar too)

  • Open dev tools and go to Source Panel.

  • On your right there should be Event Listener Breakpoints, go ahead and click on Mouse->click to enable any breakpoints on click event. (You can choose your own event for this. I'm doing click event in this case)

  • If your scripts are minified and bundled then just skip this process. Go ahead and click on the element that you want to find your function on. It should trigger the breakpoint and you will be taken to the script that's enabling the click event (usually jquery in my case and you might have to do couple of Step Over to get to jQuery file)

  • It's possible that your jQuery will be minified but it's okay, there's a prettifier on Chrome Dev Tools (the tiny {} button at the bottom left of the source panel).

  • Now press Ctrl+Shift+O (this searches your function names on dev tools) and type dispatch (for me this is where all the trigger to our custom function seems to be happening.

  • Now create a breakpoint on the while loop right after e.currentTarget (might be different in different version of jQuery) and then press play/resume breakpoint (Your breakpoint should now jump to this line).

  • Now with few Step Ins (might be more) it'll take you to the function that's invoking this event.

It's not a perfect solution but it beats the hell out of searching all the files in your project.

If anyone has any better solution then I'll change the answer to the one that's easiest.

shriek
  • 5,605
  • 8
  • 46
  • 75
  • Omg. I found the ultimate solution. http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object – shriek May 25 '14 at 03:30