移动端调试面板插件vconsole

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配置项。

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

其他的调试工具