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

webpack自动注入vConsole

webpack可以自动注入vConsole，https://github.com/diamont1001/vconsole-webpack-plugin

// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({
            filter: [],  // 需要过滤的入口文件
            enable: true // 发布代码前记得改回 false
        }),
        ...
    ]
    ...
}

记得发布之前把enable改回false。如果不想手动修改，可以在scripts命令中加入参数，根据执行的命令判断是true还是false