移动端手机上调试Html5网页vconsole

这个小技巧在web端调试的时候特别好用，如果是PC端浏览器的话没有必要整合这个玩意了，主要是移动端设备上调试H5界面的，这篇文章将会演示uniapp和原生Html5整合vconsole；uniapp和vue的整合方式一样，不单独演示！

vconsole这个玩意是腾讯开放的，这是我目前对接腾讯所有的东西中唯一我给好评的！
先看看效果

效果显而易见，逼传统的大alert()调试要方便太多了，也不需要借助其他外部工具插上设备调试！

uniapp整合vconsole
1.移入npm

npm install vconsole

2.使用
main.js 文件里面添加下方代码。

// #ifdef H5
	// 提交前需要注释  本地调试使用
	const vconsole = require('vconsole')
	Vue.prototype.$vconsole = new vconsole() // 使用vconsole
	// #endif

搞定，重启项目就会在右下角出现一个绿色的按钮

html5整合vconsole
1.导入js脚本

<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

2.初始化

<script>
    // 初始化
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

搞定