开题:公司开发的移动端项目被放置在了微信公众号,需求同学反馈,使用系统的人员存在使用pc端微信公众号的场景,但是经常出现白屏问题。微信的内置浏览器不同于其他浏览器可以方便的调出控制台检查错误,在这里给出建议检查思路与方法。
Mac
自测Mac端s微信内置浏览器不存在此情况,如果遇到白屏问题,升级微信版本即可,如果解决不了参照Windows解决方式
Windows
自测Windows微信内置浏览器并不是所有版本都存在问题,但是我升级到最新版本依然无法打开。在pc端,移动端,移动端微信浏览器均能打开页面的情况下,考虑是否为浏览器兼容性问题。
调出微信内置浏览器控制台
- devtools_resources.pak下载地址 https://share.weiyun.com/55lX4Ff
- 将下载的文件分别放入微信安装目录以及微信内置浏览器目录下。
微信安装目录:C:\Program Files (x86)\Tencent\WeChat
微信内置浏览器目录:C:\Users\xxx\AppData\Roaming\Tencent\WeChat\All Users\CefResources\2581
3.在微信内置浏览器界面右键就可以看到Show DevTools选项了
devtools_resources.pak 应该存在很多版本,但是大多数微信内置浏览器内核版本都一直未改变,大概率此文件可用。
IE浏览器调试
打开微信内置浏览器的调试工具后会发现,有一些报错信息你是找不到具体的错误位置的。打开IE浏览器的调试工具,将调试版本设置为ie9,你会发现,ie9控制台报错信息和微信内置浏览器的控制台报错信息基本相同,在这里你是可以找到报错的有用具体信息的。
总结:白屏问题多为vue,react这些webpack工程。其中我们自行编写的js代码会经过bable编译成es5代码,但是项目中引用的组件库会存在一些低版本浏览器无法识别的代码。