移动端调试神器vconsole小结

移动端调试神器vconsole

前端开发过程中，往往会出现开发时在电脑中模拟移动端都是正常的，但真正在移动端运行时会出现偏差，而在移动端中又不能像在电脑浏览器中随时查看浏览器console，检查问题，这时候就需要用上移动端调试神器vconsole。

vconsole 在H5中使用：

在H5中使用vconsole直接在script 标签中引入（下面的示例代码引入的是3.9.0的版本）：

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

引入vconsole之后在项目中可看到vConsole的绿色按钮，正常console.log()，点击按钮就可以看到我们想要打印的东西。

vconsole在vue项目中使用

在vue项目中使用就比较人性化；
1、安装vconsole（默认install最新版本，指定版本参考npm语法）：
npm install vconsole

2、在main.js中引入：

import VConsole from 'vconsole'
const vConsole = new VConsole();

Vue.use(vConsole)

引入vconsole之后在项目中可看到vConsole的绿色按钮，正常console.log()，点击按钮就可以看到我们想要打印的东西。

如果对你有帮助，记得点个赞噢（~~）