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