vconsole使用方法 vue_vConsole使用

1、介绍

github

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

查看 console 日志

查看网络请求

查看页面 element 结构

查看 Cookies、localStorage 和 SessionStorage

手动执行 JS 命令行

自定义插件

怎么发现此工具的了？

在调用微信接口扫一扫功能，使用alert来调试查看是否返回结果消息，最后发现很多次没有结果信息返回，还怀疑是否微信接口不稳定，后来发并不是没有返回结果，alert的原因，使用vConsole就可以查看返回结果信息，此工具在小程序当中也有出现

我们常用到的就是日志输出，和浏览器缓存localStorage

此前掌银项目缓存登录使用的就是localStorage，测试时不方便，有了此工具点击菜单栏的clear就可以清楚缓存

1.png

2.png

3.png

5.png

6.png

2、安装

// 初始化

var vConsole = new VConsole();

console.log('Hello world');

2：npm下载

npm install vconsole -S

3、简单使用

在主js中：

import VConsole from 'vconsole'

const vConsole = new VConsole()

Vue.use(vConsole)

console.info("vconsole-info-测试")

4、webpack 版插件

安装

npm install vconsole-webpack-plugin -D

在vue.config.js中设置：

configureWebpack: config => {

config.plugins.push(

//手机端调试

new vConsole({

filter: [], // 需要过滤的入口文件

enable: isVConsole === true // 生产环境不打开

})

)

}

5：打印日志

与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：

console.log('Hello World');

未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。

日志类型

支持 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

6：公共属性及方法

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

7.png

// get

vConsole.option // => {...}

// set

vConsole.setOption('maxLogNumber', 5000);

// 或者：

vConsole.setOption({maxLogNumber: 5000});