H5引入和使用vConsole.min.js

vConsole github地址
vConsole 是騰訊開源的項目,這就簡單的介紹一下使用

使用npm引入vconsole.min.js

下載 vConsole 的最新版本。(不要直接下載 dev 分支下的 dist/vconsole.min.js)

或者使用 npm 安裝:

npm install vconsole

引入 dist/vconsole.min.js 到項目中:

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

手動引入vconsole.min.js

<script src="項目的路徑/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

或者去BootCDN搜索對應的版本引入

<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

<script>
    // 初始化
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

使用

<script>
// 初始化vConsole
window.vConsole = new window.VConsole();
</script>

js中打印
普通日志(log)

 console.log("Hello world");

信息日志(info)

 console.info("Hello world");

調試日志(debug)

 console.debug("Hello world");

警告日志(warn)

 console.warn("Hello world");

報錯日志(error)

 console.error("Hello world");

打印Object

    console.log({
        string: 'foobar',
        number: 233,
        boolean: true,
        object: {
            foo: 'bar'
        },
        array: [8, 7, 6],
        func: function() {}
    });

vConsole 銷毀

window.vConsole.destroy();

demo地址:http://wechatfe.github.io/vconsole/demo.html

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 33、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方(存儲到物理硬盤中)1、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,258評論 0 2
  • 版權聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,491評論 0 21
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,682評論 2 71
  • 由于鄙人才疏學淺,所以只能用最直白的方法來敘述比較簡單的事情。廢話不多,開始步入本文正題吧! 當我們網(wǎng)站項目做完的...
    傳奇狗閱讀 5,154評論 5 7
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey閱讀 6,370評論 2 36

友情鏈接更多精彩內容