github地址

1. 装置 vconsole-webpack-plugin 插件

npm install vconsole-webpack-plugin --save-dev

2. 批改配置文件vue.config.js

const vConsolePlugin = require('vconsole-webpack-plugin')module.exports = {  configureWebpack: config => {        const debug = process.env.NODE_ENV !== 'production'        let pluginsDev = [            new vConsolePlugin({                filter: [],                enable: debug            })        ]        config.plugins = [...config.plugins, ...pluginsDev]    }}或是configureWebpack: config => {    config.plugins.push(        //手机端调试        new vConsole({        filter: [],     // 须要过滤的入口文件        enable: isVConsole === true      // 生产环境不关上        })    )}

3.应用

import Vue from 'vue'import VConsole from 'vconsole'const vConsole = new VConsole()Vue.use(vConsole)

4.日志类型

反对 5 种不同类型的日志，会以不同的色彩输入到前端面板：

console.log('foo');   // 白底黑字console.info('bar');  // 白底紫字console.debug('oh');  // 白底黄字console.warn('foo');  // 黄底黄字console.error('bar'); // 红底红字

反对以下 console 办法：

console.time('foo');    // 启动名为 foo 的计时器console.timeEnd('foo'); // 进行 foo 计时器并输入通过的工夫

Object/Array 结构化展现
反对打印 Object 或 Array 变量，会以结构化 JSON 模式输入（并折叠）：

var obj = {};obj.foo = 'bar';console.log(obj);

多态
反对传入多个参数，会以空格隔开：

var uid = 666;console.log('UserID:', uid); // 打印出 UserID: 233

5：公共属性及办法

//以后 vConsole 的版本号。vConsole.version//显示 vConsole 主面板vConsole.show()//暗藏 vConsole 主面板vConsole.hide()//析构一个 vConsole 对象实例，并将 vConsole 面板从页面中移除。var vConsole = new VConsole();vConsole.destroy();//显示 vConsole 的开关按钮。vConsole.showSwitch()//暗藏 vConsole 的开关按钮vConsole.hideSwitch()

vConsole.option配置项。

// getvConsole.option // => {...}// setvConsole.setOption('maxLogNumber', 5000);// 或者：vConsole.setOption({maxLogNumber: 5000});

其余的调试工具