前端调试浅谈

今天和育豪同学一起调试解决bug，虽然从下午两点一直到晚上的10:40才修好，调试坎坷，值得回顾以及深入思考。

一、解决bug一般步骤

总的来说解决bug的步骤：

1. 复现bug，定位原因
2. 根据原因，对应解决问题
3. 修复后测试
4. 上线后简单测试

二、问题与思考

虽然看着解决bug的步骤非常简单，但是实际操作起来要基于对现有项目足够熟悉才行，否则就会花较长的时间在定位问题上。

回想今天解决bug的过程，实际上一直到晚上10点左右，才完整复现（毕现）bug，问题则出在与后端拿到的数据结构，与功能所定义的key是不相同，通俗点讲，前端这边认为拿到的数据是一一对应，但实际的数据是一对多的形式

那么，站在更高一点的角度来看，实则前后端对与关键字段的理解不一致，应当做好充分的沟通

我们为啥花了这么长的时间定位问题？我认为问题主要有两点：

1. 不熟悉项目源代码和数据流
2. 缺乏经验
3. 针对特殊环境搭建与调试的复杂性（调试成本）

目前我们的调试环境的体验其实有待提升，调试的成本个人感觉挺高，不过也还能接受

三、杂谈

原以为老板让你兼容IE6只是个程序员自我嘲讽的话，没想到啊！

实际，也还好，我的工作也差不多到了ie9左右的版本吧？【疑问脸】与此同时，还有多终端（mobile+pc），懂了吧？全平台。

要考虑这么多的平台，那么兼容性问题就是最为常见的问题，而且解决起来还颇为麻烦。

对于经验丰富的大佬来说应该还ok！不过，小菜鸟就得多尝试，尝试深入学习记忆在各种环境、布局组合、平台下的css样式表现，从MDN上查阅标准，Caniuse等等上去查阅，参考标准，那么绝大多数情况是没有什么问题的啦！

在兼容性问题上，解决方案大多数来自于经验与尝试，也没有什么切实科学有效的方法，经验者可能五分钟解决，菜鸡可能两小时。

四、总结

纸上得来终觉浅，绝知此事要躬行。虽然通读了源码，但是没有切实代码上完整体验一次数据流，再加上初步接触各种高阶语法的react，实际上手还是有些难度，多花点时间再琢磨琢磨。

关于调试工具的使用方法，其实通过搜索引擎大都可以查阅，我就不细讲了，感兴趣的小伙伴可以关注我的博客或者个人微信公众号，搜索DYBOY就能找到啦！

已经差不多快一个月，团队之间的氛围非常ok，受益匪浅，我觉得自己还有很多的不足之处，也希望能在这宝贵的时间里厚积，之后能为团队输出更加优质的work！