Chrome开发者工具中DOM元素右键的Break on选项是什么？

右键点击DOM元素出现的Break on选项，是Chrome开发者工具用于追踪DOM变更的调试利器，包含三个细分功能：

• Break on subtree modifications：当前DOM元素的子节点发生添加、删除或位置移动时，自动触发断点，暂停JS执行。适合调试动态列表渲染、弹窗内容更新这类子元素频繁变动的场景。
• Break on attribute modifications：当前DOM元素的属性（比如class、id、style、自定义属性等）被修改时触发断点。能快速定位到修改元素样式、属性赋值的代码，解决样式突变、属性异常变更的问题。
• Break on node removal：当前DOM元素本身被从DOM树中移除时触发断点。专门用于排查页面元素莫名消失的问题，直接定位到删除该元素的代码位置。

使用时只需勾选对应选项，后续页面中触发对应DOM操作时，DevTools会自动跳转到Sources面板，精准定位到执行修改的代码行，大幅提升DOM相关问题的调试效率。

内容的提问来源于stack exchange，提问作者Rusty