Is there a way to find out what function the event triggers?

Question

From time to time, I will have huge jQuery event handlers, for example: -

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

which are attached to elements on my page. This is not a problem if there are several event handlers on my page, but on a huge application, debugging these event handlers can be a real pain in the neck. Sometimes I will not understand this when the callback is called on certain events.

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

It should not be dev-tools. It could be javascript or jquery trick too.

In addition, I understand what I can execute console.log, debugger;or even put console.trace()callbacks in my functions, but I was wondering if there was anything cleaner or smarter.

Answer 1

So, I somehow found a way to get Dev-tools to do this without using any console (s).

This is what you do (I'll talk for Chrome Dev Tools, but Firefox should look alike too)

• Open the developer tools and go to Source Panel.

• Event Listener Breakpoints, Mouse- > click, . ( . click )

• minified bundled, . , . breakpoint, script, click ( jquery , , , , jQuery)

• , jQuery minified, , prettifier Chrome Dev Tools ( {} Source Panel).

• Ctrl+Shift+O ( dev) dispatch ( , , , .

• breakpoint while e.currentTarget ( jQuery), play/resume breakpoint ( ).

• Step Ins ( ) , .

, .

- , , .

Answer 2

Javascript Chrome Dev Tools .

, .

, console.log, .

Answer 3

, console.log() . , . , .

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

$('#mybutton').click(doSomething);