「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
当我第一次接触正儿八经的接触app混合开发的时候，一直有个疑问，移动端在真机上是如何调试的呢？好在，这些问题并不需要我去考虑，大佬们都写好了，我只负责缝缝补补bug。有一次问大佬，在真机上如何查看接口，有没有类似f12控制台一样的东西？大佬跟我说想看哪个页面，就在哪个页面的右下角快速点点点点点5次就会出来了。
还有这种操作吗？抱着试一试的态度，我随便找了个页面，照着大佬的方法试了试，果然，出现了控制台！！！询问后才知道这是用了一个叫vconsole的插件
VConsole是什么
VConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。
使用方法
安装
npm install vconsole
引入
// main.js
import vConsole from 'vconsole'
let VConsole = new vConsole()
Vue.prototype.vconsole = VConsole //这里我们把这个方法放到vue原型上，方便我们在页面中调用
以上2步操作完成后，在重启我们的项目就会发现在页面的右下角有个vConsole的按钮，就可以使用了。我们打开控制台也能看到页面的dom结构、api接口和缓存这些信息。
方法
当然，vconsole中也会有一些特定的方法，常见的方法如下
- vConsole.show()--显示 vConsole 主面板
- vConsole.hide()--隐藏 vConsole 主面板
- vConsole.showSwitch()-- 显示 vConsole 的开关按钮。（vConsole的按钮）
- vConsole.hideSwitch()-- 隐藏 vConsole 的开关按钮。
- vConsole.destroy()-- 将 vConsole 面板从页面中移除。
对比
经实测，vConsole 的开关按钮默认是显示在页面的右下角。并不需要连点5次后才显示，这也解除了我当时的疑惑，继续研究一下这个功能是如何实现的，
研究发现，这边是在window上添加了一个方法，动态的在页面的右下角创建一个div,当我们连点右下角6次的时候就会触发show（）方法（感觉有点多此一举，小声bb），而且这种写法有个比较严重的弊端。因为我们是先打开的页面再去点开控制台，那么初始化的一些接口在控制台上是看不到的，也会影响我们的调试。我们来稍加改动一下
本着最小改动的方法，我们直接在app.vue中添加代码
mounted() {
setTimeout((
)=>{
$('#__vconsole').show()
},1000)
}
这样我们打开项目后就会直接显示vconsole按钮，而且不管在初始化还是切换页面的时候都能抓取到页面信息了。
