关于前端:移动端调试面板插件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});

其余的调试工具