移动端真机调试方案总结

我们在写webapp或者移动端网页需要嵌入到app时候，尤其是在APP内置的webView上加载我们的页面，想要查看手机浏览器信息是非常困难的事，当出现问题的时候，你又不能查看日志，一般会连接本地测试环境，然后在alert来打印日志（这种做法太蠢了），然后一遍一遍的定位bug，修改代码。常用的插件有eruda、vconsole等，这里我选择使用vConsole，这个工具就想电脑端的devtools，可以查看日志，网络，页面，Resources等。
调试代码一般就是为了查看数据和定位 bug。分为两种场景，一种是开发和测试时调试，一种是生产环境上调试。
为什么有生产环境上调试呢？有些时候测试环境上没法复现这个 bug，测试环境和生产环境不一致，此时就需要紧急生产调试。
原理与解决方案

多页面应用

在要进行调试的页面

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script> 

单页面应用

先下载安装npm install vconsole
然后在入口文件进行引用就可以了

const vConsole = new VConsole();

有兴趣看看它实现的基本原理，我们关注的点应该在 vsconsole 如何打印出我们所有 log 的 腾讯开源vconsole

上述方法仅用于开发和测试。生产环境中不允许出现，所以，使用时需要对环境进行判断。

import Vconsole from 'vconsole'
if (process.env.NODE_ENV !== 'production') {
    new Vconsole()
}

### chrome远程调试H5页面
使用chrome的inspect调试真机页面，可以在手机上下载一个chrome浏览器
1.[http://debugx5.qq.com](http://debugx5.qq.com)设置
信息=>打开TBS内核Inspector调试功能，打开TBS内核X5jscore Inspector调试功能
2.手机打开“USB调试”功能，这个功能的开关设置在“开发者选项”界面，打开后通过USB线将手机连接到电脑上并允许调试
3.chrome访问 chrome://inspect/#devices ，点击对应的页面进行inspect