javascript - How to find what code is run by a button or element in Chrome using Developer Tools

Question

I'm using Chrome and my own website.

What I know from the inside:

1) I have a form where people sign up by clicking this orange image-button:

2) I inspect it, and this is all it is: <img class="formSend" src="images/botoninscribirse2.png">

3) At the top of the source code, there are tons of script sources. I know which one the button calls because I coded it: <script src="js/jquery2.js" type="text/javascript"></script>

4) Within that file, you could find: $(".formSend").click(function() { ... }); which is what is triggered by the button (to do a fairly complex form validation and submit) and what I want is to be able to find that using chrome dev tools on any website.

How can I find out where does the element call?

Listeners tab didn't work for me. So then I tried looking the click event listeners, which seemed like a safe bet to me but... there's no jquery2.js in there (and I wouldn't really know which file the code is so I'd waste time checking all these...):

My $(".formSend").click(function() { ... }); function within jquery2.js file is not there.

Jesse explains why:

"Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function, in turn, goes through some abstraction layers and checks, and somewhere in there, it executes your function."

---

As suggested by some of you I've collected the methods that worked in one answer down below.

Answer 1

Alexander Pavlov's answer gets the closest to what you want.

Due to the extensiveness of jQuery's abstraction and functionality, a lot of hoops have to be jumped in order to get to the meat of the event. I have set up this jsFiddle to demonstrate the work.

---

1. Setting up the Event Listener Breakpoint

You were close on this one.

1. Open the Chrome Dev Tools (F12), and go to the Sources tab.
2. Drill down to Mouse -> Click
   
   (click to zoom)

---

2. Click the button!

Chrome Dev Tools will pause script execution, and present you with this beautiful entanglement of minified code:

(click to zoom)

---

3. Find the glorious code!

Now, the trick here is to not get carried away pressing the key, and keep an eye out on the screen.

1. Press the F11 key (Step In) until desired source code appears
2. Source code finally reached
   • In the jsFiddle sample provided above, I had to press F11 108 times before reaching the desired event handler/function
   • Your mileage may vary, depending on the version of jQuery (or framework library) used to bind the events
   • With enough dedication and time, you can find any event handler/function

---

4. Explanation

I don't have the exact answer, or explanation as to why jQuery goes through the many layers of abstractions it does - all I can suggest is that it is because of the job it does to abstract away its usage from the browser executing the code.

Here is a jsFiddle with a debug version of jQuery (i.e., not minified). When you look at the code on the first (non-minified) breakpoint, you can see that the code is handling many things:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

The reason I think you missed it on your attempt when the "execution pauses and I jump line by line", is because you may have used the "Step Over" function, instead of Step In. Here is a StackOverflow answer explaining the differences.

Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function in turn goes through some abstraction layers and checks, and somewhere in there, it executes your function.