How to set event listener breakpoints in Chrome's Elements tab?

Question

I am struggling with setting breakpoints in dynamically generated DOM elements, where different event handlers are also binded from Javascript. This basically means that I have a nice looking DOM structure which is not part of the initially received HTTP response, it is purely built on client side.

Now the problem is that Chrome's Elements tab only allows me to set breakpoints for

• Subtree modification OR
• Attribute modification OR
• Node removal

Is it possible to set a breakpoint in the dynamically created DOM element's dynamically created event listener somehow? (See image attached. I want to set the breakpoint into the listenerbody)

Note that I can't use 'Sources/Scripts' tab either, since it only shows me the initially received static HTTP content response. And I can't set breakpoint either in the code referenced in the 'Event Listeners' accordion, since it will only show me the event listener when it is getting attached not when it is getting fired!

Any ideas?

Answer 1

Sources -> Event Listener Breakpoints contains a bunch of checkboxes which can be checked to activate a breakpoint when an event listener for the event is triggered.