前端调试浅谈

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

Google Chrome浏览器真好用

一、解决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!

发表评论 / Comment

用心评论~

金玉良言 / Appraise
hyzLV 1
2020-08-10 08:58
博主在哪个团队?
头像
她说,LV 2
2020-08-10 11:13
@hyz:同问
头像
她说,LV 2
2020-08-10 15:09
@hyz:试试移动端评论长了会怎么样?
跟大佬学一学
头像
DYBOY站长已认证
2020-08-13 22:22
@hyz:Bytedance

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/blog.dyboy.cn/content/templates/dyblog/footer.php:56) in /www/wwwroot/blog.dyboy.cn/include/lib/view.php on line 23