How to find the script that is activated when clicking on a button?

Question

Suppose I have a button in a webpage and I want to find the function that is revoked when the button is clicked. How do I find this script in Chrome developers tools?

Answer 1

In the Chrome debugger tools, please go to the Source tab. On the extreme right, you'd see the list that says Watch, Call Stack, Scope etc. If you expand Event Listener Breakpoints, you'd see the list of event listeners you can put a break-point on.

Expand the Mouse event listener, select click and proceed to click the button. It should hit the break-point.

Hope it helps!

Edit by Gideon: Blackboxing

You may find yourself stepping into library event handlers when you use the Event Listener Breakpoints. You can avoid stepping into these every time by right-clicking and selecting 'Blackbox script' as per below: