前端开发项目实例_vConsole - 手机上的前端开发者调试工具

当我们在电脑上调试前端应用时,我们只需加几个 console.log,然后在浏览器打开开发者调试工具,就能使用运行日志、网络事件、前端储存等工具,进行代码调试。可对于移动端的前端应用而言,往往需要在移动端的浏览器上进行运行测试,而一般的移动端浏览器并没有那么健全的调试工具,使得调试十分费力。而 vConsole 提供一个页面内的开发者调试工具,很好地解决了这个问题。

图片[1]-前端开发项目实例_vConsole - 手机上的前端开发者调试工具-JieYingAI捷鹰AI

开发者调试工具

简介

vConsole,是 Tencent (腾讯) 在 Github 上开源的移动端的前端开发者调试工具,项目位于 ,目前版本为 3.3.4。vConsole 使用 JavaScript/TypeScript 编写,在前端项目中引用后,可以在网页中嵌入一个利用前端渲染的开发工具工具箱,提供一个类似于 PC 浏览器所提供的原生的开发者调试工具,功能包括:

可以在浏览器没有自带调试工具(如移动端)时,为开发者提供调试功能。

图片[2]-前端开发项目实例_vConsole - 手机上的前端开发者调试工具-JieYingAI捷鹰AI

vConsole项目

安装

可以直接下载项目所提供的发行版的代码,或使用 NPM 安装:

npm install vconsole

下载或安装完成后,把 dist/vconsole.min.js 引入到前端项目代码中:

如果使用了 AMD/CMD 规范,有也可以使用 require:

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

对于 TypeScript 项目,可以引入 d.ts 文件

import 'path/to/vconsole.min.d.ts';

示例

vConsole 提供了 VConsole,使用时需要对其实例化:

var vConsole = new VConsole(option);

只有在实例化之后,vConsole 才会被嵌入到网页中开始使用。VConsole 接受一个可选的配置对象,配置项包括:

可以通过 setOption 进行配置项的更新:

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

在初始化完成后,网页的右下角就会出现一个 vConsole 菜单按钮,点击之后,就会弹出调试面板:

vConsole菜单

图片[3]-前端开发项目实例_vConsole - 手机上的前端开发者调试工具-JieYingAI捷鹰AI

vConsole面板

工具箱包括:

可以点击右下角的 Hide 菜单进行隐藏,回到网页界面。

与 PC 端一样,可以直接使用 console.log() 等方法打印日志:

console.log('Hello World');

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

vConsole 支持不同级别的日志,以不同的颜色输出到前端面板:

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

日志打印支持多参数,支持样式自定义:

var uid = 233;console.log('UserID:', uid); // 打印出 UserID: 233console.log('%c blue %c red', 'color:blue', 'color:red'); // blue redconsole.log('%c FOO', 'font-weight:bold', 'bar'); // FOO barconsole.log('%c Foo %c bar', 'color:red'); // Foo %c bar

vConsole 提供了一个特殊格式的日志,当使用 [system] 作为第一个参数时,会把日志输出到 System 面板:

console.log('[system]', 'foo'); // 'foo' 会输出到 System 面板

图片[4]-前端开发项目实例_vConsole - 手机上的前端开发者调试工具-JieYingAI捷鹰AI

vConsole系统面板

vConsole 还支持计时器的使用:

console.time('foo');    // 启动名为 foo 的计时器console.timeEnd('foo'); // 停止 foo 计时器并输出经过的时间

vConsole 支持打印 Object 或 Array 变量,会以结构化 JSON 形式输出,并可折叠展开:

var obj = {};obj.foo = 'bar';console.log(obj);/*Object{  foo: "bar"}*/

vConsole的DOM元素查看面板,提供了基本的对各元素进行展开查看的功能:

图片[5]-前端开发项目实例_vConsole - 手机上的前端开发者调试工具-JieYingAI捷鹰AI

vConsole元素面板

vConsole 还支持自定义插件和面板,可以自行编写界面,添加所需的新功能。

总结

vConsole 为在移动端的前端开发提供了一个功能丰富的开发者调试工具,使得在手机上也能够完成基本的代码调试工作,且安装使用简单,可扩展性强,极大地提高了开发效率。vConsole 是一个十分值得关注的开发工具项目,目前已处于稳定维护阶段,值得前端开发者进行代码阅读和研究,并进行相关插件的开发。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
来说点什么吧!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容