breakpoint doesn't work on button or div element but works on li element

Question

I'm new to JS and trying to understand code of project https://github.com/tastejs/todomvc

Refer to screenshot, I tried to put breakpoint against button X , later its parent element div but in both cases execution doesn't stop when I click on X button. ( tried all 3 options under breakpoint )

It only worked when I put breakpoint at element li ; chose option node removal.

Please explain what mistake am I doing here ?

Answer 1

Well, the reason the breakpoint is not working on when you are clicking on the <button> or the <div> containing the button is because there is no change to the DOM after clicking the button (seeing as the only breakpoint options, other than on node removal , are on subtree modifications or on attribute modifications ).

The reason the on node removal works on the <li> is because (as far as I understood of the project you are using) when clicking on the button, you start a block of JS code that will remove said element (the <li> ).

Still, if you want a way to get a way to actually add a breakpoint when clicking on the button, I suggest using this method:

• in Chrome Dev tools
• go to Sources
• look at the bottom half of the window and find Event Listener Breakpoints
• find and expand DOM Mutation
• enable DOMFocusIn
• click on your button

Caution: this will cause a breakpoint to appear whenever an element is focused (not just clicking on the button) and as probably you know some elements in the DOM can gain focus .

Hope this helps.