JavaScript DOM断点调试实战：Chrome与Firebug属性监控指南

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 还可以监视其子元素的变化，以及何时元素被删除。