本文介绍JavaScript中DOM断点（DOM Breakpoint）的使用技巧，重点讲解如何在Chrome和Firebug中监控DOM元素属性变化。通过右键菜单设置“Attributes modifications”，可自动暂停脚本执行并定位到修改代码处，同时支持子元素变化与删除监控，提升复杂页面调试效率。
DOM断点调试概述
部分开发者可能倾向于使用源代码搜索的方式，这在处理结构相对简单的页面时往往行之有效。然而，面对包含大量脚本文件、片段、面向对象实现或隐藏代码的复杂页面，这种搜索方式可能难以快速定位目标。
在JavaScript调试过程中，断点调试是常用手段。实际上，针对DOM结构的调试同样可以应用断点机制，即DOM Breakpoint（DOM断点）。
Chrome与Firebug中的DOM断点设置
具体操作步骤如下：
1. 在Chrome浏览器中，打开开发者工具，先选中一个页面元素，然后点击鼠标右键，依次点击菜单中的”Break on …”——勾选“Attributes modifications”。刷新页面，当该元素的属性发生变化时，就会暂停脚本的执行，并且定位到改变发生的地方。
2. 在安装了firebug 的Firefox 浏览器中，打开firebug，切换到“HTML”选项卡，选中需要监视的DOM元素，鼠标右键，勾选菜单中的“在属性改变时中断”。这样就成功添加了一个HTML 断点。刷新页面后，firebug 也会帮助我们定位到更改该元素属性的代码。
除了可以监视DOM元素本身的属性变化，Chrome 和 Firebug 还可以监视其子元素的变化，以及何时元素被删除。