这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰。还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问题。
第一个bug很严重:本地前后端联调没有问题,而且调的是和测试环境一样的接口,但是测试环境就是报length为undefined
和同事从晚上8点多一起找问题到晚上12点都没有解决好这个问题。问题出现前我做了一波这样的操作,改了一次代码然后提交到测试环境(自己本地没测试到位就提交了,就是最大的问题),然后就发现挂了。现在想想如果是老赵解决这个问题,他一定会问我刚刚改了些什么,然后会让我把刚刚改的改回去,再去排除bug。如果我们当初改这个bug的时候,是先这样思考的,那么我们也就不会为这个bug花那么多无用的时间了。最终定位到问题的时候,确实是我提交前改的那个变量写错了,这个变量不是一个数组。
如果真的想不起来自己刚改了什么,也应该是先去从那些调用了length的变量上去排除,将所有的可能的数组变量替换成[]一个空值再来判断。
回顾这个问题,想起一件有趣的事情。
第一个,测试环境有问题,但是本地没有问题,说明本地环境还是不行的,出了问题不报错,这是一个需要去思考看能否优化的点,本地环境是否能和测试环境保持一样的环境。至少本地环境能像测试环境一样有问题能在console中暴露出来。第二个,拿到这个问题,我第一个去检查传的数据是否正确,我定位了所有会调用到的方法,最后发现都可以一一执行,数据传递都正常但到最后还是会报length为undefined,我当时就蒙圈了。到底是因为什么原因?现在发现其实定位这个问题并不难,再多想想,拿到数据之后会干嘛?拿到数据当然就是去渲染dom啦,这里就应该怀疑是渲染dom出错了,问题就浮现水面了,dom上有个不是数组的变量读取了length,再去一一排除可能的数组变量就能解决问题了。
第二个bug:数据改变,需要重新触发dom渲染高度。采用js操作dom,重新设置元素高度,但是无效。
场景:切换月份获取当月的数据,对应的表格元素的高度要自适应内容的高度,表格的每一行有一个跨单元格的悬浮的div,这个div中包含内容,当前的行的表格单元格的高度要和这个div的高度保持一直。高度采用js计算,在刚开始进入这个页面的时候就会在等到拿到数据并渲染dom之后去调用这个js逻辑去读取表格中每一行包含的这个悬浮的div的高度,然后再去给对应行的表格的单元格设置对应高度。
按理说操作dom,重新给元素赋值高度是可以,但是不行的时候,是为什么不行?这个方案最后结果不是我们想要的,就要去排除是什么原因导致的不行,如果最后排除原因是方案不行就要换方案,没有排除原因都不能去想着换方案。
高度没有按预期去渲染,看下想要设置的数据是否是正确的,永远打印整个变量去检查数据,因为这次从数组中去读取数据就是打印的其中的部分数据,结果才迟迟没有定位到真的问题,最后发现数据读的总是前面部分的数据,定位到问题是切换月份没有置空之前数组中的数据。
总结:
1、问题的表象不一定就是真的问题所在,比如第一个bug,看上去像是环境问题导致的,其实不是,只是本地也出错了没有把错误暴露出来,问题根本原因还是代码问题。
2、解决问题的思路:数据渲染没按预期渲染,检查数据,从预期结果出发,先思考预期结果什么样,然后看看实际结果是什么,思考实际结果出现的原因,问题就浮现了。