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