江苏龙网

  1. 主页 > 生活百科 > >

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

vConsole

当我们在电脑上调试前端应用时 ， 我们只需加几个 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项目
安装【vConsole - 手机上的前端开发者调试工具】可以直接下载项目所提供的发行版的代码 ， 或使用 NPM 安装：
npm install vconsole下载或安装完成后 ， 把 dist/vconsole.min.js 引入到前端项目代码中：
<script src=https://www.isolves.com/it/cxkf/ydd/baike/2020-08-17/"path/to/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 接受一个可选的配置对象 ， 配置项包括：
  • 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: 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


推荐阅读


上一篇：空姐学茶艺推广茶文化,什么是茶文化

下一篇：老茶头名称解读,老茶头有什么危害