Android手机上Webview页面以及微信/QQ浏览器真机调试

最近正在开发一个手机端微信的Vue SPA项目,遇到一个奇怪的问题,本地dev server上运行正常,打包部署后某些手机的微信浏览器或者手机浏览器运行页面白屏,由于是线上问题,而PC端也无法重现,先是想是不是某个外部js加载出错造成的,看了半天代码尝试优化也没解决问题,最后想到是否能通过调试手机端浏览器来定位。在网上查了一下,PC端Chrome已经实现远程调试移动设备WebView页面。
首先打开Android手机浏览器,我用的是小米手机自带的浏览器(不能用QQ手机浏览器官方版,Chrome检测不到,但是调试版可以,这个稍后再说)。在手机浏览器中打开需要调试的页面,然后使用USB连接PC与手机,在Chrome地址栏中输入 chrome://inspect 打开以下页面。


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
Chrome Inspect 在上图中就可以看到我调试的页面行李旅宿,点击下边的inspect就会弹出与PC端Chrome一样的控制台界面,如下所示


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
Chrome Inspect 这样就能在chrome控制台看到真机的布局样式和log了。接下来看看我的白屏问题当我打开首页的时候,在上边这个窗口的控制台打印出这个错误
【Android手机上Webview页面以及微信/QQ浏览器真机调试】

Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
控制台错误 不进行真机调试还真的看不到这个log,然后又是一系列的搜索调查终于找到问题所在。我这个Vue项目用的是ES6的语法,而Babel只是转换了新的JavaScript语法,而没有转换Object.assign, Promise等这种新的API,而我的入口JS中使用的Vue-Map就是使用了Object.assign从而造成主JS报错页面无法加载。解决方法就是 npm install babel-polyfill --save-dev,然后在主JS的最上边加上 import 'babel-polyfill',重新打包部署运行,一切正常。(但有一个问题还没搞清楚,为什么本地运行正常,期待大神给些建议),以上就是Chromium内核浏览器的调试方法。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
跑步前进,接下来咱们看看如何真机调试Android的微信浏览器和QQ浏览器,这两种浏览器都是X5内核,使用Chrome的方式的话找不到手机页面。好在腾讯推出了一个神器,TBS Studio - TBS Studio介绍,X5浏览器的开发调试利器。
下载后运行后界面如下



Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
TBS Studio 使用USB连接PC与手机,使用微信打开调试页面,点击启动检测


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
TBS Studio 检测到手机微信后,点击确定继续检测,走到step4会显示以下页面


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
TBS Studio 此时,在手机上如果微信是新版本内核,则会弹出调试确认开关,如果是旧内核,则需要根据提示更新内核(大胆更新,不用担心),最后点击启动调试,则会弹出和Chrome Inspect相似的检测页面


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
TBS Studio Inspect Page 看到了我的调试页面行李旅宿,点击Inspect则会进入微信浏览器真机调试控制台,也是和Chrome很相似


Android手机上Webview页面以及微信/QQ浏览器真机调试
文章图片
TBS Dev Tool Console 这样就可以随心所欲的调试真机了,所有和微信浏览器环境的问题几乎都能在这里找到答案。QQ浏览器的调试方式和微信的一样,只是TBS会强行让你安装QQ浏览器调试版,换成调试版后,我发现Chrome也就能检测到QQ浏览器的页面了,很神奇。
最后,微信还有一个调试利器也很好用,就是微信web开发者工具,最早是和小程序开发工具分开发布的,开发者怨声载道最后集成到一起了,这个也能模拟微信的运行环境,在这里就不赘述了,详情请查看微信小程序工具。
以上就是Android端常用浏览器的真机调试方法,有了这些,再也不担心那些产品环境bug过夜了。
顺便推荐一下我开发的旅宿产品,公众号 行李旅宿 https://wx.travelingwithhotel.com/,来场说走就走的旅行就用行李旅宿。

    推荐阅读