Chrome debugging - break on next click event

Question

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?

Solution

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'.

Comments

[Dan Dascalescu]

Mostly a duplicate of Using Chrome, how to find who's binded to an event?

[IdontCareAboutReputationPoints]

you can't image how happy I am to know this tip, thank you very much!

[Artem Russakovskii]

Is there a way to catch clicks but limit the breakpoint to only a certain file or directory and not, say, various obfuscated libraries and Chrome extensions?

[Yuriy F]

@ArtemRussakovskii You would need to blackbox the types of files you don't want to include in your debugging. In chrome, go to dev tools -> Settings (gear icon) -> Blackboxing in the left menu. I believe you can use regular expressions or just a filename (like jquery.js to not break inside the jquery library scripts, for example).