web analytics
Sign In | Register
Welcome, Guest

How to debug a click event in Chrome?

 Options
Previous Topic Next Topic

codeling 1599 - 6654
@2021-06-11 19:00:26

Scenario 

There is a button in a Web page and its click events are handled by a 3rd party Javascript framework, I want to debug the framework, however I don't know where the corresponding event handler code resides to set a breakpoint. How to generally "break on next click event" and see where and how this click is handled by the 3rd party JavaScript framework?
@2021-06-11 19:07:35

Solution

What you are looking for are 'Event Listener Breakpoints' on the Sources tab in the DevTools window (press F12 to show it). These breakpoints are triggered whenever any event listener, that listens for chosen event, is fired. In your case, expand 'Mouse' category and choose 'Click'.
@2021-06-11 19:35:26

Right click on the element in question in Google Chrome. Click inspect menuitem which is the last item in the menu. The developer tool window will popup in the bottom of the screen. The html for the selected element that you right clicked on will be highlighted. From here you can click the "Event Listeners" tab located in the far right panel of the developers menu. Choose your selected listener and it will show you the associated javascript file. 
Previous Topic Next Topic

Comments
You must Sign In to comment on this topic.


© 2024 Digcode.com