最近工作中总结的一些调试技巧

最近半年一直在做web组件的缺陷修复工作，分享一些期间总结的技巧，也希望大家有好的调试技巧可以分享出来~

1.使用onpropertychange来监控dom控件属性改变。

2.运行时通过调试修改dll中的逻辑，而不是每次都“修改代码-重新编译-重新运行并调试”

3.使用vs的条件断点来实现不重新编译而进行简单代码修改的需要。

4.修改输出来处理htc文件无法调试的问题。

 

 细节：

1. 使用onpropertychange来监控dom控件属性改变。

　　适用场景：在浏览器端的操作中，一个控件的某个属性被错误地改变了（如用户点击表格，导致其他一个单元格（CellA）的背景色错误地变红）。若查看代码找问题，或跟踪这系列操作监控控件值的改变都会比较花时间（5分钟以上），这时若能在控件属性改变时触发中断，直接查看调用堆栈的话，就能节省不少时间。

　　使用方式： 首先我们要确定监控的目标，这里假定我们已经确认了（上面例子里的CellA），然后可以通过ie的开发人员工具，定位到这个CellA，在属性面板里给这个控件加上如下属性 “onpropertychange： if(event.propertyName=="style.color" && this.style.color == "red") debugger;”

                   ok,现在只要放心去重现操作，然后在它的颜色发生改变的时候就会触发中断了。

　　其他：用vs或firefox都能进行类似的设置，根本上来说其实就是给控件添加个事件而已。然后它只能适用于大多数情况，有些情况如html中嵌入的xml的改变就无法添加这种事件。

 

2.运行时通过调试修改dll中的逻辑，而不是每次都“修改代码-重新编译-重新运行并调试”

　　适用场景：项目中有很多工程，如果它们需要修改它们进行调试，那“修改代码-重新编译-重新运行进行调试（可能要重复多次）”的成本会比较大。   这时若添加调试添加断点，在操作的断点中断中用监视窗口或即时窗口修改变量值，或拖动表示当前执行代码的小指针来改变代码的执行顺序。这样就不用重复地修改-编译了。

 

3.使用vs的条件断点来将2中的操作自动化。

　　适用场景：在问题2中，有时还是得重复几次修改才能找出最好的修改方案，或是在for循环或其他重复比较多的场景下导致操作太多。这时若能让代码在运行时自动地进行一些修改，将会节省不少时间。这里举一个简单场景：int型属性A，我们希望在每次set的时候set一个原值2倍的数字。但是除非set的值是0，否则不要中断。

　　使用方式：将项目添加调试，在set方法里打上断点，小红点上右键-条件，输入“(value=value*2) == 0”。这样就实现了“在每次set的时候set一个原值2倍的数字。但是除非set的值是0，否则不要中断”的目的。

　　其他：其实这种方式的使用场景还是比较少的，当然每次出现还是能节省不少时间。但是要注意使用后关闭或禁用断点，否则它持续运行可能会对后面的操作进行干扰，而它不触发中断的特点又导致这个干扰很容易被忘记。另外，它也不支持复杂的逻辑，而且只能修改变量值而不能改变代码执行顺序。

 

4.修改输出来处理htc文件无法调试的问题。

　　适用场景：我们的web组件中大量的使用了htc文件（可简单理解为一种包装了的js代码），它有个很蛋疼的特点就是:一个页面中多个控件如果都引用了同一个htc文件，那只有第一个输出的控件才能调试到htc代码中。解决办法也简单啦，就是修改render逻辑，让要监控的目标控件第一个输出就好。

 

 恩，目前就想到这几条，如果再想到会补充上的。希望大家有好的调试技巧也发上来分享下哈~

 顺祝大家程序员节节日快乐!