278

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?

Improve this question
1

1 Answer 1

Reset to default
484

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

you can't image how happy I am to know this tip, thank you very much!
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?
@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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.