215

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?

D.R.
  • 17,368
  • 19
  • 70
  • 158
  • 3
    Mostly a duplicate of [Using Chrome, how to find who's binded to an event?](http://stackoverflow.com/questions/7338193/using-chrome-how-to-find-whos-binded-to-an-event) – Dan Dascalescu Nov 18 '14 at 23:09

1 Answers1

363

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

mvermand
  • 4,849
  • 6
  • 38
  • 65
Konrad Dzwinel
  • 33,802
  • 12
  • 91
  • 100
  • 11
    you can't image how happy I am to know this tip, thank you very much! – IdontCareAboutReputationPoints Jun 07 '19 at 08:20
  • 3
    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? – Artem Russakovskii Jul 23 '19 at 22:34
  • 2
    @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). – Yuriy F Dec 16 '20 at 22:20