Chrome debugging – break on next click event

Chrome debugging – break on next click event

We have a button. Click events are handled by a 3rd party framework, however, the framework is buggy somehow.
We want to debug the framework, however, we 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 framework?

Solutions/Answers:

Solution 1:

What you are looking for are ‘Event Listener Breakpoints‘ on the Sources tab. These breakpoints are triggered whenever any event listener, that listens for chosen event, is fired. You will find them in the Sources tab. In your case, expand ‘Mouse’ category and choose ‘Click’.

DevTools Event Listener Breakpoints

Related:  Can I disable a CSS :hover effect via JavaScript?