How to set a breakpoint on clicking a 3rd party button?

Question

I'm trying to debug a 3rd party widget ( +1 button to be exact). Specifically, I'd like to set a breakpoint in Chrome that stops when a button in the widget is clicked.

I would like to break on the 3rd party code that handles to click event. Is there a Chrome extension (or something else I haven't thought of) to help me find the right place in the code to break on?

Answer 1

You can make use of Chrome's Developer Tools; no extension is required.

I made a +1 button example here: http://jsfiddle.net/rPnAe/ .

If you go to that fiddle and then open Developer Tools (F12), then go to Scripts and expand Event Listener Breakpoints and lastly expand 'Mouse' and tick the 'click' checkbox, then whenever you click somewhere (which includes an event listener), the debugger will now break at the line of code which contains the listener function.