腾讯开源的移动 H5 的控制台开发调试工具

vConsole

腾讯开源的移动 H5 的控制台开发调试工具，支持查看 console 日志、网络请求、自定义插件等

用于移动网页的轻量级，可扩展的前端开发人员工具。

特征

1.下载模块

下载 vConsole 的最新版本。

或者使用 npm 安装：

npm install vconsole

然后复制 dist/vconsole.min.js 到自己的项目中。

2.引入模块

(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 <head> 中引入：

<head>
 <script src="path/to/vconsole.min.js"></script>
 <script>
 var vConsole = new VConsole();
 </script>
</head>

(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 require() 引入模块：

var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();

请注意，VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中。

初始化 & 配置

引入后, 需要手动初始化 vConsole：

var vConsole = new VConsole(option);

option 是一个选填的 object 对象，具体配置定义请参阅公共属性及方法。

使用 setOption() 来更新 option：

vConsole.setOption('maxLogNumber', 5000);
// 或者：
vConsole.setOption({maxLogNumber: 5000});

打印日志

与 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 计时器并输出经过的时间

更多用法可以查看开发文档

您知道哪些好用的H5插件，欢迎评论分享，共同探讨学习

如果觉得文章能够对您有所帮助，可以关注我，你的支持会鼓励我不断分享更多更好的优质文章。