CODEWITHSUNDEEP
javascriptjquerydebugginggoogle-chrome-devtoolsfirefox-developer-tools
shriek
shriek

Reputation: 5823

Is there a way to know which function an event is calling?

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.

Upvotes: 4

Views: 1970

Answers (3)

shriek
shriek

Reputation: 5823

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.

Upvotes: 1

Steven de Salas
Steven de Salas

Reputation: 21467

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);

Upvotes: 2

Paul Draper
Paul Draper

Reputation: 83255

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.

Upvotes: 2

Related Questions