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 後，日志會列印到頁面前端+原生控制台。