移动端开发调式插件-VConsole

简单使用

移动端开发最蛋疼的是什么？

当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。

为什么手机就不能像电脑那样f12出来个控制台呢？

于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。

这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole

使用方法也很简单，如果是传统静态html页面，我们script引入vconsole.min.js文件，然后new出vConsole 对象即可。

<script src="/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole();
</script>

建议如果要使用这个，请在最开始就使用这段代码

nuxt 使用

nuxt使用也可以按照上面的方法，但是有点蛋疼，我们有npm包可以选择，所以，可以改用插件的方式使用。

yarn add vconsole  --dev

安装我们我们在plugins目录创建一个vConsole.js文件

vConsole.js：

import VConsole from 'vconsole'
const vConsole = process.env.NODE_ENV === 'development' ? new VConsole() : ''
export default vConsole

一般来说，开发模式下使用VConsole，正式打包就不要了，具体判断可以根据自己的项目需求来。

插件创建完毕后，我们还要去配置激活。

打开nuxt.config.js文件

export default {
  plugins: [
    { src: '@/plugins/vConsole', mode: 'client' },
  ]
}

mode我自己设置的是client，表示这个插件只有在客户端才调用。

当我这样配置的时候，我可以通过window对象的属性来控制VConsole是否开启（插件那要对应修改），相对来说，会方便一些，正式环境可以配置一下，就能查看这个了。

比如：window.debug = true

那么插件那可以这样：

import VConsole from 'vconsole'
const vConsole = window.debug ? new VConsole() : ''
export default vConsole

预览图