H5頁面如何引入vConsole


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
————————————————
版權聲明:本文為CSDN博主「WMSmile」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/wm9028/article/details/88992204


免責聲明!

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



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