写点什么

ReactNative 进阶(四十七):移动端调试利器 vConsole

  • 2022 年 2 月 02 日
  • 本文字数:1988 字

    阅读完需:约 7 分钟

ReactNative进阶(四十七):移动端调试利器 vConsole

一、前言

痛点:移动 web开发时,在手机上,如果是要看控制台信息,都需要alert弹窗,这样很不友好,而且还会阻拦进程。


前端工程开发、调优过程中,调试方法、方式是重中之重,最便捷的方式当属拥有一款调试利器,应用它,你可以轻松获取调试结果。在前期Vue技术栈开发PC Web端过程中,我们讲解过debuggerVue-devtools,现简要回顾下。


  • debugger是谷歌浏览器提供的调试语句,其主要是通过停止JS的执行进行断点设置。它的使用方法很简单, 只需要在JS语句中, 插入一行debugger;即可,其支持通用的单步、步进、步出等常规调试操作。应用debugger调试Vue项目,在项目需要的位置写入debugger,项目运行后,打开浏览器按F12,在chrome sources页签中就会直接进入断点,至此可以进行单步、跳步调试。

  • Vue-devtools调试工具是为针对Chrome浏览器而设计的开源调试工具。具体使用方式详参博文《Vue进阶(幺陆柒):Vue项目调试技能》。

二、vConsole 简介

vConsole 是由微信公众平台前端团队研发的网页移动端调试面板,专为移动 web 页面量身设计,可用于展示 console 日志,方便开发、调试,帮助开发者更为便捷地进行开发调试工作。


手机预览



特性


  • 查看 console 日志;

  • 查看网络请求;

  • 查看页面 DOM 结构;

  • 查看 CookieslocalStorageSessionStorage;

  • 手动执行 JS 命令行;

  • 自定义插件;

三、使用方法

3.1 引用 JS 文件方式

  1. 下载模块checkout 文件 dist/vconsole.min.js 到本地。

  2. 引入模块(1) 如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块:


<script src="path/to/vconsole.min.js"></script>
复制代码


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


var vConsole = require('path/to/vconsole.min.js');
复制代码


  1. 打印 log 日志


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


console.log('Hello World');
复制代码


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


(2) 支持 4 种不同类型的日志,会以不同的颜色输出到前端面板:


> - console.log('foo'); // 白底黑字> - console.info('bar'); // 白底紫字> - console.debug('oh'); // 白底黄字> - console.warn('foo'); // 黄底黄字> - console.error('bar'); // 红底红字
复制代码


(3) 支持打印 Object 对象,会以 JSON 字符串格式输出:


var obj = {};obj.foo = 'bar';console.log(obj); // 打印出 {foo: 'bar'}
复制代码


(4) 支持传入多个参数,以空格隔开:


var uid = 233;console.log('UserID:', uid); // 打印出 UserID: 233
复制代码


(5) 引入模块后,vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志,请使用 vConsole.ready() 方法:


// 若未通过 AMD/CMD 方式加载模块,// vConsole 会自动挂载在全局 window 对象中,即 window.vConsolevConsole.ready(function() {  console.log('Hello World');});
复制代码

3.2 npm 依赖包方式

执行命令 npm i vconsole


然后在文件中加入代码,就可以打印日志了


import  VConsole  from  'vconsole';let vConsole = new VConsole();console.log("test");
复制代码

3.3 第三方插件

vconsole 第三方插件支持列表如下:



以下主要讲解vconsole webpack插件 vconsole-webpack-plugin


  1. npm install vconsole-webpack-plugin --save-dev

  2. 修改webpack.base.conf.js 配置文件。


vConsole 作为一个调试模块,注定了需要在发布前把它去掉,为了避免人为操作失误而影响线上功能,配置信息如下:


// 引入插件const vConsolePlugin = require('vconsole-webpack-plugin');
// 接收命令运行参数const argv = require('yargs') .describe('debug', 'debug 环境') // use 'webpack --debug' .argv; module.exports = { ... plugins: [ new vConsolePlugin({ filter: [], // 需要过滤的入口文件 enable: !!argv.debug }) ], ...}
复制代码


启动脚本的时候增加 --debug 即可。


  1. 修改package.json配置文件,dev部分指令如下:


"dev": "webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js",
复制代码

四、注意事项

引入 vConsole 模块后,页面前端将会在右下角出现 vConsole 的悬停按钮,可展开/收起面板。


若不希望普通用户看到面板,请不要在生产环境中引入 vConsole 模块!

五、vConsole 遮挡问题解决

有时候会因为页面布局原因,导致vConsole调试按钮被挤出可视区域,此时可以通过设置vConsole样式解决该问题,通过 F12 查看元素可知,vConsole应用的样式类为.vc-switch,可以设置为


.vc-switch {  right : 100px;}
复制代码


通过以上样式设置,就可以解决遮挡问题。

六、拓展阅读

发布于: 刚刚阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
ReactNative进阶(四十七):移动端调试利器 vConsole