断点不适用于button或div元素，但适用于li元素

Question

我是JS的新手，试图理解项目https://github.com/tastejs/todomvc的代码

参考屏幕快照，我尝试将断点置于button X上，之后将其父元素div放置在该button ，但是在两种情况下，当我单击X按钮时，执行都不会停止。 （在断点下尝试了所有3个选项）

仅当我在元素li处设置断点时，它才起作用； 选择选项节点删除。

请解释我在这里犯什么错误？

Answer 1

好吧，当您单击<button>或包含该按钮的<div>时，断点不起作用的原因是因为单击该按钮后DOM没有变化（作为唯一的断点选项，除了on node removal ， subtree modifications或attribute modifications ）。

on node removal在<li>上起作用的原因是（按我对您正在使用的项目的了解），单击按钮时，您启动了一个JS代码块，该代码将删除所述元素（ <li> ）。

不过，如果您想获得一种在单击按钮时实际添加断点的方法，建议您使用以下方法：

• 在Chrome开发工具中
• 前往资源
• 查看窗口的下半部分，然后找到事件侦听器断点
• 查找并展开DOM突变
• 启用DOMFocusIn
• 点击你的按钮

警告：这将导致在元素被聚焦时出现断点（不仅仅是单击按钮），并且您可能知道DOM中的某些元素可以获得focus 。

希望这可以帮助。