解决bug的前提的bug的复现与bug的定位,在网页开发工作中有时遇到莫名其妙的报错,或者是没有达到预期的功能效果,但是并不方便调试,单纯看代码的话无法解释出错原因。(或者是JS脚本冲突、或者某些事件触发的脚本逻辑有问题、或者DOM标签缺失等……都可能导致不易排查的bug。)

有前端同事参与手机页面开发,因为对手机端开发的经验不足,加之手机端调试不便,出了问题手足无措无法定位。

  这时候我们要使用代码精简法来定位错误根源——对代码不断进行区域删除,直到症状消失,最后一次删除的区域很可能就是导致错误的根源。进一步查找根源可以在目标区域使用更小单位的区域定义反复使用此方法。


  下面以一个手机端页面bug排查过程示例此方法解决问题的过程。


问题描述:有客户声称“在手机上访问页面,当文本框获得焦点时页面变小”

运用代码精简法解决问题过程:


1、---------------------

 提问:是否与文本框有关?

 删除:删除文本框相关代码

 结果:问题依旧

 结论:与文本框无关


2、---------------------

 提问:是否与页面滚动事件有关?

 删除:搜索scroll,删除相关JS代码

 结果:问题依旧

 结论:与页面滚动事件无关


3、---------------------

 提问:是否与图片滚动文字滚动有关?

 删除:搜索Swipe,删除相关JS代码

 结果:问题依旧

 结论:与页面Swipe无关


4、---------------------

 提问:是否与其他JS有关?

 删除:

读完这篇文章后,您心情如何?