您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 百科

vConsole - 手机上的前端开发者调试工具

时间:2020-08-07 11:22:19  来源:  作者:

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

vConsole - 手机上的前端开发者调试工具

开发者调试工具

简介

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

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 DOM 元素结构
  • 查看 Cookies、LocalStorage 和 SessionStorage
  • JS 命令行
  • 自定义插件

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

vConsole - 手机上的前端开发者调试工具

vConsole项目

安装

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

npm install vconsole

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

<script src="path/to/vconsole.min.js"></script>

如果使用了 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 接受一个可选的配置对象,配置项包括:

  • defaultPlugins:需要自动初始化并加载的内置插件
  • onReady:完成初始化后触发的回调方法
  • onClearLog:点击清理日志时的回调方法
  • maxLogNumber:日志数量上限
  • disableLogScrolling:是否禁用新日志出现时自动滚动到底部

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

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

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

vConsole - 手机上的前端开发者调试工具

vConsole菜单


vConsole - 手机上的前端开发者调试工具

vConsole面板

工具箱包括:

  • Log:日志输出和命令行,包括不同等级日志的子面板
  • System:请求信息,以及系统日志
  • Network:网络抓包和分析
  • Element:页面DOM元素代码检查
  • Storage:Cookies、LocalStorage 和 SessionStorage

可以点击右下角的 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: 233

console.log('%c blue %c red', 'color:blue', 'color:red'); // blue red
console.log('%c FOO', 'font-weight:bold', 'bar'); // FOO bar
console.log('%c Foo %c bar', 'color:red'); // Foo %c bar

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

console.log('[system]', 'foo'); // 'foo' 会输出到 System 面板
vConsole - 手机上的前端开发者调试工具

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元素查看面板,提供了基本的对各元素进行展开查看的功能:

vConsole - 手机上的前端开发者调试工具

vConsole元素面板

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

总结

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



Tags:vConsole   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
当我们在电脑上调试前端应用时,我们只需加几个 console.log,然后在浏览器打开开发者调试工具,就能使用运行日志、网络事件、前端储存等工具,进行代码调试。可对于移动端的前端应...【详细内容】
2020-08-07  Tags: vConsole  点击:(55)  评论:(0)  加入收藏
▌简易百科推荐
我们有时候在音频通话过程中,想要改成视频通话。如果挂断当前的通话再重新发起视频通话就会显得比较麻烦。 因此很多app提供了将音频通话升级成视频通话的功能,同时也有将视频...【详细内容】
2021-12-23  充满元气的java爱好者  博客园  Tags:WebRTC   点击:(5)  评论:(0)  加入收藏
随着移动互联网的发展和智能手机的普及,手机端成为了最大的流量入口,占据着一半以上的流量来源。所以很多企业在开发网站之前,也会考虑到开发手机网站。不过,手机端网站并非是对...【详细内容】
2021-11-03  小刘吃吃吃  搜狐号  Tags:手机网站   点击:(33)  评论:(0)  加入收藏
2010年,谷歌宣布正式退出国内市场,随后,各大厂商推出的手机也不再预装GMS(谷歌移动服务)。 与海外安卓用户不同,国内安卓用户对软件的需求不需要基于来自GMS框架下的Google Play(谷...【详细内容】
2021-10-08  雷科技    Tags:安卓App   点击:(49)  评论:(0)  加入收藏
一、滑屏操作不需要看到欢迎页面,直接做里面的后续操作就好了。也就是我想记住一些用户的习惯, 不要像第一次访问一样,有一个重置与否,给它关闭了。# 重置与否desired_caps["noR...【详细内容】
2021-06-17  美好一点    Tags:Appium   点击:(145)  评论:(0)  加入收藏
架构也因项目而异。不同的项目需求不同,对应的架构也会不同。架构分层API的设计完毕之后。接下来我就会考虑App项目的总体架构了。总体怎样架构,我也以前做过不少尝试。早期的...【详细内容】
2021-05-24  每周IT  今日头条  Tags:App架构   点击:(196)  评论:(0)  加入收藏
很多企业或个人开发者在开发好App之后,会遇到一系列上架难题,本文以华为应用市场为例,帮助你解读如何快速完成应用市场上架提交&审核。...【详细内容】
2021-03-16    知乎  Tags:华为应用市场   点击:(459)  评论:(0)  加入收藏
过去几年以来,Netflix 一直在开发 Prodicle 移动应用,借此在电视节目与电影制作领域推进创新。时至今日,实体生产的具体方式可谓日新月异,不同国家、地区甚至是不同生产体系之间...【详细内容】
2020-11-16      Tags:Netflix   点击:(143)  评论:(0)  加入收藏
作者:ypaapyyang,腾讯 WXG 后台开发工程师,个人公众号:码农课代表。本文旨在分析分布式配置系统的必要性、可行性,及其关键要素,并介绍一款基于该系列分析,在微信研发体系下的实践...【详细内容】
2020-10-20      Tags:分布式   点击:(90)  评论:(0)  加入收藏
与其天天看华为怎么被禁,天天聊鸿蒙OS怎样怎样,不如来点实际的,加入成为华为开发者!安卓的开发者们入坑了吗?华为要打造自己独立的生态,迫不得已,逼出来的国产OS终究要来。 Harmony...【详细内容】
2020-10-12      Tags:HarmonyOS   点击:(1082)  评论:(0)  加入收藏
集成华为HMS SDK的游戏或普通应用,调用接口(比如getCurrentPlayer登录接口)总是报错6003。该错误码官方文档表示:签名证书指纹错误,签名证书指纹主要用于校验应用的真实性,确保应...【详细内容】
2020-10-12      Tags:HMS SDK   点击:(91)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条