很多文章講述不是很到位血久，就記錄一下 vconsole 的使用和注意點(diǎn)戒劫。
為什么要使用 vconsole.js ?
因?yàn)槭謾C(jī)或者平板之類的客戶端軟件并沒有控制臺(tái)猜欺，前端開發(fā)想看log日志比較麻煩窍箍，如果一直彈窗alert方法實(shí)在太挫了讯檐。所以騰訊開發(fā)了這個(gè) js 插件值桩。
注意點(diǎn)
vconsole 這個(gè)插件源碼里面是依賴 html dom api 來實(shí)現(xiàn)的摆霉，如果你所使用的的環(huán)境不支持 dom，與原有的瀏覽器內(nèi)核有差異奔坟，可能無法使用携栋。一般的 web-view 嵌套網(wǎng)頁(yè)是可以用的，或者手機(jī)瀏覽器都是OK的咳秉。如果是小程序或者第三方軟件解析html需要查看一下原理婉支。至于微信小程序?yàn)槭裁从校驗(yàn)閯e人就是內(nèi)置的澜建，自己寫適配了自己向挖。
如何使用引入？
提示：官方源代碼地址 ： https://github.com/Tencent/vConsole/blob/dev/README_CN.md
1. 使用 cdn 方式引入炕舵，這里列舉了所有版本的 js 地址何之，可以隨意選擇一個(gè)版本復(fù)制引入。https://www.bootcdn.cn/vConsole/咽筋。然后在頁(yè)面 <head> 里面加入初始化代碼溶推。舉例如下：
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><script> // 初始化 var vConsole = new VConsole(); console.log('Hello world');</script>
為什么要在head引入，這樣能盡量將你所有的的console都打印出來奸攻，vconsole原理是只有 new 初始化的時(shí)候才會(huì)插入dom蒜危，并改寫監(jiān)聽console方法。
2. 使用 es6 webpack 引入舞箍。
npm install vconsole或者cnpm install vconsole或者yarn add vconsole 然后設(shè)置個(gè)環(huán)境變量作為區(qū)分線上線下環(huán)境舰褪，比如： import VConsole from 'vconsole'; const isDebug = true;// 本地開發(fā)調(diào)試注入vConsoleif (isDebug) { new VConsole();}
至此完美。
