Can't find out how button click event got wired

Question

I have a button which posts back through Ajax. I tried to find out what code executes when the button is clicked. I used Visual Event (screen capture below) to see how the event was bound but the info didn't help me enough. Then I set an event listener breakpoint on mouse clicks in Chrome. The breakpoint hit code in the main jQuery file which was also not helpful. So I blackboxed the file. Now when I click the button, no breakpoints are hit.

What's a systematic way to find the user code which gets executed? I also searched for 'live' and 'click' as text across the whole app. It was time consuming and didn't find where the click event for the button got attached. It's painful to do such a search. I would like to know the productive technique using Chrome's debugger or another tool. (Another browser's tips are OK)

Answer 1

Have you tried the Chrome profiler?

1. Launch the Chrome DevTools (F12)
2. Go to the Profiles panel
3. Ensure that Collect JavaScript CPU Profile is selected
4. Click Start
5. Perform your operation
6. Click Stop.

Then you should see a list of functions that were called.

Answer 2

There are several possible ways to do so. One is described by the user thesentiment. Another way is to use the DevTools' debugger.

1. Open the Chrome DevTools (F12)
2. Switch to the Sources panel
3. Click the Pause button () or hit F8
4. Perform your operation

=> The script execution will stop at the first line of the event handler function within jQuery. You can then step through to your actual event handling function.

Note that in Firebug this works much easier, because its Events side panel already displays the wrapped listeners, i.e. the functions that are called by a jQuery event listener: