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?

Solution

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.

Comments

[Alma Alma]

Thanks for the idea, but the thing is that I can't use the sources tab for the reason I described earlier. Any other ideas?

[Rob W]

@CaptainFogetti This feature is available without requiring any sources. Try it: Put document.onclick=function(){}; in the console, follow the steps in my answer and click on the document.

[Alma Alma]

Thanks! That's great! I didn't know you can just set these listener breakpoints without any sources... ^_^

[kalenjordan]

I can get it to work on some events but I feel like it isn't working on others. For example I know that there is code thats manipulating the DOM, but the only event that fires out of all the DOM Mutation events (I have them all checked) is DOMContentLoaded. Not seeing DOMNodeInserted fire.

[Rob W]

@kalen Go to the elements tab, right click on an element and pick an option at "Break on".

[kalenjordan]

So you have to specifically select an element that you want to listen for DOM events on? In my case, the reason I was looking into the event listeners is because I was trying to find out where a particular DOM insertion was being generated.

[Rob W]

@kalenjordan "Break on subtree modifications" triggers a breakpoint whenever a node is added/removed to/from any of its descendants. It seems to fit your job.