CODEWITHSUNDEEP
javascriptgoogle-chromebuttongoogle-chrome-devtools
CrazySynthax
CrazySynthax

Reputation: 15018

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

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?

Upvotes: 3

Views: 2832

Answers (2)

Dumbledore
Dumbledore

Reputation: 460

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.

enter image description here

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:

enter image description here

Upvotes: 3

Mathieu
Mathieu

Reputation: 151

You can use ctrl + shift + j to open the chrome dev tools and go to the sources tab. There you can see all scripts that are being used by the page. You can place breakpoints to determine when events are happening, and can use ctrl + f to find anything specific (i.e. button id, class).

Upvotes: 1

Related Questions