移动端使用vConsole真机调试

现在很多移动端是用H5做的，但是有时候，有的问题，无法在真机进行调试，这个就需要vConsole进行调试，它可以打印log，查看css布局，查看接口请求等功能。

方法一：

1. 引入vConsole插件：yarn add vconsole -s 或 npm install vconsole
   获取使用yarn 进行安装"vconsole": "^3.3.0"

2. 使用vConsole插件：需在main.js中引入。

import Vconsole from 'vconsole';

3. 初始化vConsole：new 这个对象。

const vConsole = new Vconsole()
Vue.use(vConsole)

4. 使用：在你需要的地方使用console.log()就行。

方法二：

在某些安卓机型上不需要导入vConsole就可以直接进行调试，
用微信打开这个网址 http://debugx5.qq.com/
或者用微信扫一扫下面这个二维码，

用微信扫一扫

进去后，选择中间‘’信息‘’，然后一直往下翻，把vConsole打开，把下面两个Content Cache关掉。

20180409172818400.png

然后打开你要调试的页面，你就你能看到右下角有个绿色按钮vConsole。点击就能查看你代码中console的内容了。

亲测效果图如下：

效果图1

效果图2

参考：
https://blog.csdn.net/weixin_36934930/article/details/79870240

https://blog.csdn.net/qq_35321405/article/details/83108555

https://blog.csdn.net/qq719756146/article/details/85121102