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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/299891.html
標籤：JavaScript
上一篇：【jQuery】精細學習記錄