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

x33g5p2x  于2021-11-11 转载在 React  
字(2.7k)|赞(0)|评价(0)|浏览(427)

一、前言

痛点:移动 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.vConsole
vConsole.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;
}

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

六、拓展阅读

相关文章