很多文章講述不是很到位，就記錄一下 vconsole 的使用和注意點。
爲什麼要使用 vconsole.js ?
因爲手機或者平板之類的客戶端軟件並沒有控制檯，前端開發想看log日誌比較麻煩，如果一直彈窗alert方法實在太挫了。所以騰訊開發了這個 js 插件。
注意點
vconsole 這個插件源碼裏面是依賴 html dom api 來實現的，如果你所使用的的環境不支持 dom，與原有的瀏覽器內核有差異，可能無法使用。一般的 web-view 嵌套網頁是可以用的，或者手機瀏覽器都是OK的。如果是小程序或者第三方軟件解析html需要查看一下原理。至於微信小程序爲什麼有，因爲別人就是內置的，自己寫適配了自己。
如何使用引入？
提示：官方源代碼地址 ： https://github.com/Tencent/vConsole/blob/dev/README_CN.md
1. 使用 cdn 方式引入，這裏列舉了所有版本的 js 地址，可以隨意選擇一個版本複製引入。https://www.bootcdn.cn/vConsole/。然後在頁面 <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 初始化的時候纔會插入dom，並改寫監聽console方法。
2. 使用 es6 webpack 引入。
npm install vconsole
或者
cnpm install vconsole
或者
yarn add vconsole
然後設置個環境變量作爲區分線上線下環境，比如：
import VConsole from 'vconsole';
const isDebug = true;
// 本地開發調試注入vConsole
if (isDebug) {
new VConsole();
}
至此完美。
關注微信公衆號
