最近半年一直在做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逻辑,让要监控的目标控件第一个输出就好。

 

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

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