前端如何引入vConsole


 

很多文章講述不是很到位,就記錄一下 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> 里面加入初始化代碼。舉例如下:

  1.  
    <script src= "https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
  2.  
    <script>
  3.  
    // 初始化
  4.  
    var vConsole = new VConsole();
  5.  
    console.log( 'Hello world');
  6.  
    </script>

為什么要在head引入,這樣能盡量將你所有的的console都打印出來,vconsole原理是只有 new 初始化的時候才會插入dom,並改寫監聽console方法。

 

2. 使用 es6 webpack 引入。

  1.  
    npm install vconsole
  2.  
    或者
  3.  
    cnpm install vconsole
  4.  
    或者
  5.  
    yarn add vconsole
  6.  
     
  7.  
    然后設置個環境變量作為區分線上線下環境,比如:
  8.  
     
  9.  
    import VConsole from 'vconsole';
  10.  
     
  11.  
    const isDebug = true;
  12.  
    // 本地開發調試注入vConsole
  13.  
    if (isDebug) {
  14.  
    new VConsole();
  15.  
    }

至此完美。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM