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

Question

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

请参阅屏幕快照，我尝试在button X处设置断点，后来在它的父元素div上放置断点，但是在两种情况下，当我单击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。

希望这会有所帮助。