[移动开发]vConsole在移动开发中使用

vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果。

• 直接引入使用

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

• npm安装使用

  // 安装
  npm install vconsole
  
  // 初始化 & 配置 (main.js)
  import Vconsole from 'vconsole'
  const vConsole = new Vconsole()
  // window.vConsole = new VConsole()
  

• vconsole在开发环境（在npm run serve时）显示，生产环境（在npm run build时）不显示

  // (main.js)
  if (process.env.NODE_ENV !== 'production') {
    window.vConsole = new VConsole()
  }
  

• 设置样式区分宿主

  .vc-switch {
    background-color: blue !important;
  }
  

VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中;未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。