记一次线上bug调试历程

656 阅读2分钟

问题的场景是这样的,我在开发了一个新的活动页面之后,经历了加班,测试,联调,预上线,上线等等过程之后,终于告一段落,然而在一个美好的周末突然我们的测试小姐姐发微信告诉我说,在iphone6和安卓机上页面白屏,这种重要的线上事故,肯定是要第一时间进行问题的排查和修复的。然后我在家中连上了代理,开始排查问题(充实的一天又开始了!)。

问题排查过程:

首先我在自己手机上看了一遍,很好,页面完美展现…

然后我找了同事的安卓机,很好,页面完美展现…

又匹配了一下版本,初步排查应该是兼容问题导致。

这里我排查问题的方式,本地调试的话主要采用的是charles连接本地代理进行调试,排查问题。但是(什么都怕但是),这次的问题比较严重,charles中只是显示了加载html和js,然后,就没有然后了…

所以到这里我基本判断了,应该是由于代码中有某些语法在低版本中不支持,js报错导致页面直接挂掉。这种时候charles能带来的帮助非常有限,所以只能另找他法。

这个时候我多么希望可以看到手机上控制台展示出来的报错信息,在网上找寻一番,发现vconsole是可以实现我想要的效果的,但是(但是它又来了!),vconsole是需要页面正常渲染之后才可以看到报错信息,个人理解这个和charles区别不是很大,只是相对比较直观,而且可以看到dom节点。

后面在我的导师提醒下,得知可以通过chrome自带的一些调试工具进行调试。也就是chrome://inspect/#devices,只需要将复现的手机打开开发者模式,通过usb连接到电脑,然后打开webview就可以在如图位置看到你手机上打开的页面,这个时候只需要轻轻的一点,

unexpected token …

由此我们可以得知,是由于我的项目中使用了扩展运算符,且这个扩展运算符没有被编译导致在某些系统中不能被识别而导致的错误。

至此,问题的排查过程已经结束,接下来,就是问题分析的过程。

问题分析过程请见另外几篇博客。

juejin.cn/post/684490…