內嵌h5調試神器-vConsole

vConsole

一個輕量、可拓展、針對手機網頁的前端開發者調試面板，可用於APP內嵌H5及其他調試H5的地方。

使用

方法一：cdn 方式引入
// 引入
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

方法二：npm方式引入
npm install vconsole

import Vconsole from 'vconsole'
// Vue全局調用
if (測試環境) {
  const vConsole = new Vconsole()
  Vue.use(vConsole)
}

打印

加載 vConsole 后，日志會同時打印到頁面vConsole前端+原生控制台。

// 與原生一致即可，支持原生的各種屬性：info、error等
console.log('Hello World');

方法

//當前 vConsole 的版本號。
vConsole.version
//顯示 vConsole 主面板
vConsole.show()
//隱藏 vConsole 主面板
vConsole.hide()
//析構一個 vConsole 對象實例，並將 vConsole 面板從頁面中移除。
var vConsole = new VConsole();
vConsole.destroy();
//顯示 vConsole 的開關按鈕。
vConsole.showSwitch()
//隱藏 vConsole 的開關按鈕
vConsole.hideSwitch()
...

結言

以上內容即可輕松完成H5基本調試需求，如有深入要求建議詳細閱讀文檔。
Gitee｜騰訊開源vConsole
Github | 騰訊開源vConsole