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

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

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

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

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

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

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

　提问：是否与文本框有关？

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

　结果：问题依旧

　结论：与文本框无关

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

　提问：是否与页面滚动事件有关？

　删除：搜索scroll，删除相关JS代码

　结果：问题依旧

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

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

　提问：是否与图片滚动文字滚动有关？

　删除：搜索Swipe，删除相关JS代码

　结果：问题依旧

　结论：与页面Swipe无关

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

　提问：是否与其他JS有关？

　删除：<script>标签，全部删除

　结果：问题不再出现

　结论：与页面中的某个JS有关

5、---------------------

　提问：哪个JS有关？

　反删除：一个个恢复刚才删除的JS

　结果：当common.js恢复时，问题再次出现

　结论：与common.js有关

6、---------------------

　提问：common.js里的哪行代码有关？

　删除：把common.js里的主要方法resetPage方法体删除

　结果：问题不再出现

　结论：与resetPage方法体内逻辑有关

7、---------------------

　提问：删除resetPage是违背本意的，是否是调用resetPage的逻辑不对？

　删除：恢复resetPage，删除window.onresize=resetPage

　结果：问题不再出现

　结论：修改resetPage或删除window.onresize=resetPage可解决问题，前者根本性解决问题，后者最简易的解决问题，视情况选择。

　　代码精简法还可以反过来用，即删除所有代码到不能再简化为止，然后不断添加代码，直到bug复现。

　　这种方法对技能要求不高，解决某些疑难杂症基本上可以说是药到病除！

希望各位掌握，不要有点问题就手足无措，丢给其他同事解决，这样自己永远都无法进步。

可以通过这个方法把问题定位到某行JS语句（某个HTML标签、某个CSS属性），再和有经验的同事商议bug的修复方案。

注意: 

　　- 使用此法一定要有耐心

　　- 对于 js 代码建议分别以类库功能为单位进行删除测试 

　　- 对于 HTML 代码建议按照页面结构先删除最内部的tag，由内及外，这样可以迅速发现由于tag 缺失造成的错误，同时也能保证每次删除的都是整段的代码，避免由于删除产生新的错误。  

　　- 对于确认与相关功能有关的部分不要随便删除。