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

开发者调试工具

简介

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

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

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

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面板

工具箱包括：

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 还支持计时器的使用：

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 是一个十分值得关注的开发工具项目，目前已处于稳定维护阶段，值得前端开发者进行代码阅读和研究，并进行相关插件的开发。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/soft/11234.html

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

简介

安装

示例

总结

发表评论

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

简介

安装

示例

总结

相关推荐

发表评论