背景:
在工作的时候, 突然要接手到一些从来没有接触过的老项目, 业务逻辑什么都不清楚, 然后就需要你来改bug了, 不知道你是否有遇到这种情况, 反正我是经常有的, 所以总结了一些BUG排查的小技巧

将框架的生产版本的文件转为开发版本的文件

这个是最简单有效的, 例如 ,vue项目在渲染的时候报了这个错, 也不知道是在哪个地方引起的

image.png

报错的文件是vue.min.js文件是压缩过的, 不好查看报错信息, 用vue.js, 没有压缩的版本替换, 替换后的报错信息如下:

image.png

打断点, 用函数调用栈来查找报错的位置

我们知道是什么原因导致错误了, 但是这只是第一步, 我们还得知道是哪里调用了上图的那个nativeBind方法, 然后传递了一个非Function类型的参数, 导致页面报错 , 所以我们就可以在Vue.js里面nativeBind打断点, 打了断点之后, 我们就可以从函数调用栈里面, 往上找, 直到找到那个不是Vue.js内部的函数, 应该就是我们自己的业务代码里面的函数, 所以应该就是那个代码里面出了问题

image.png

打断点时, 设置条件判断

虽然通过上面的方法可以找到报错的地方, 但是还有个问题, 就是nativeBind, 并不是每次接收到的参数都是非Function的, 也有传参是正确的时候, 而且还非常多, 但是因为我们在这里打了断点, 就会导致每次执行到这个函数时都会暂停下来, 无论执行是否成功还是失败, 一两次还好, 如果非常多次, 那么我们很难调试到我们想要的参数为非Function的情况

所以这时, 就需要给断点设置条件了, 设置方法也很简单, 只要在断点那里加一个typeof fn !== 'function', 这样就可以达到我们想要的效果了, 只要参数为非Function的时候, 停下来, 然后我们就可以根据函数的调用栈去寻找业务代码里面具体报错的地方

image.png

例外一个小tips:
使用pause on exception也可以在函数报错时停下来, 查看函数调用栈, 但是这个方法, 如果页面有很多无关紧要的报错, 也会停下来, 影响我们调试, 所以这个方法适用于页面只有一个报错的情况下:

image.png