移動端真機調(diào)試一般想看到簡單的數(shù)據(jù)會使用 alert() 的方式打印赊颠,但由于 alert() 會有一個隱形轉(zhuǎn)換成字符串的問題,一些復(fù)雜的數(shù)據(jù)沒法看到揩懒。而且彈出的對話框會打斷一些 js 的進行,體驗也很糟糕。
于是微信團隊開發(fā)的vconsole出來了单旁。
安裝:
cnpm i vconsole
引入模塊
(1) 如果未使用 AMD/CMD 規(guī)范,可直接在 HTML 中引入 vConsole 模塊:
找到這個模塊下面的 dist/vconsole.min.js 饥伊,然后復(fù)制到自己的項目中
<head>
<script src="dist/vconsole.min.js"></script>
</head>
<script>
// 初始化
var vConsole = new VConsole();
console.log('VConsole is cool');
</script>
(2) 如果使用了 AMD/CMD 規(guī)范象浑,可在 module 內(nèi)使用 require() 引入模塊:
var vConsole = require('path/to/vconsole.min.js');
使用webpack,然后js代碼中
let vConsole = new VConsole() // 初始化
(3)Vue中使用
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
需要注意的是:
vconsole 與 vue 結(jié)合使用時若嚴格使用 eslint 我的會報錯誤琅豆,報錯結(jié)果如下
error: 'vConsole' is assigned a value but never used (no-unused-vars) at src\main.js:9:5:
解決辦法在 src/main.js 入口文件引用時候使用 use 就沒事了愉豺。
import Vconsole from 'vconsole';
const vConsole = new Vconsole();
Vue.use(vConsole);
console.log("hello Vconsole");
使用時與 PC 端打印 log 一樣,可直接使用 console.log() 等方法直接打印日志茫因。未加載 vConsole 模塊時蚪拦,console.log() 會直接打印到原生控制臺中;加載 vConsole 后,日志會打印到頁面前端+原生控制臺驰贷。
打印一下運行效果圖:
了解這些就夠使用了盛嘿,更詳細的 API 去看下面這個的博客:
https://segmentfault.com/a/1190000017320562#item-1