ReactNative进阶（四十七）：移动端调试利器——vConsole

迈不过友情╰ 2022-08-29 09:49 932阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、vConsole 简介
     *  三、使用方法
     *   *  3.1 引用 JS 文件方式
         *  3.2 npm 依赖包方式
         *  3.3 第三方插件
     *  四、注意事项
     *  五、拓展阅读

--------------------

## 一、前言 ##

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

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

>  *  `debugger`是谷歌浏览器提供的调试语句，其主要是通过停止`JS`的执行进行断点设置。它的使用方法很简单， 只需要在`JS`语句中， 插入一行`debugger;`即可，其支持通用的单步、步进、步出等常规调试操作。应用`debugger`调试`Vue`项目，在项目需要的位置写入`debugger`,项目运行后，打开浏览器按`F12`，在`chrome sources`页签中就会直接进入断点，至此可以进行单步、跳步调试。
>  *  [Vue-devtools][]调试工具是为针对`Chrome`浏览器而设计的开源调试工具。具体使用方式详参博文《[Vue进阶（幺陆柒）：Vue项目调试技能][Vue_Vue]》。

## 二、vConsole 简介 ##

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

[手机预览][Link 1]  
![在这里插入图片描述][16100a1ddc6b49aa9d4d590b8f272a8a.gif_pic_center]  
**特性**

>  *  查看 `console` 日志;
>  *  查看网络请求;
>  *  查看页面 `DOM` 结构;
>  *  查看 `Cookies`、`localStorage` 和 `SessionStorage`;
>  *  手动执行 `JS` 命令行;
>  *  自定义插件;

## 三、使用方法 ##

### 3.1 引用 JS 文件方式 ###

1.  [下载模块][Link 2]  
    checkout 文件 `dist/vconsole.min.js` 到本地。
2.  引入模块  
    (1) 如果未使用 `AMD/CMD` 规范，可直接在 `HTML` 中引入 `vConsole` 模块：

(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-sources][]
 *  [vconsole-webpack-plugin][]
 *  [vconsole-stats-plugin][]
 *  [vconsole-vue-devtools-plugin][]
 *  [vconsole-outputlog-plugin][]
 *  [vite-plugin-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` 模块！

## 五、拓展阅读 ##

*  《[Vue进阶（幺陆柒）：Vue项目调试技能][Vue_Vue]》
 *  [Vue-devtools Github地址 ][Vue-devtools]

[Vue-devtools]: https://github.com/vuejs/vue-devtools/tree/master
[Vue_Vue]: https://shq5785.blog.csdn.net/article/details/113987838
[Link 1]: http://wechatfe.github.io/vconsole/demo.html
[16100a1ddc6b49aa9d4d590b8f272a8a.gif_pic_center]: /images/20220829/a79113dcff4447dbbefc5e62c70034c2.png
[Link 2]: https://github.com/Tencent/vConsole
[vConsole-sources]: https://github.com/WechatFE/vConsole-sources
[vconsole-webpack-plugin]: https://www.npmjs.com/package/vconsole-webpack-plugin/v/1.7.1
[vconsole-stats-plugin]: https://github.com/smackgg/vConsole-Stats
[vconsole-vue-devtools-plugin]: https://github.com/Zippowxk/vue-vconsole-devtools
[vconsole-outputlog-plugin]: https://github.com/sunlanda/vconsole-outputlog-plugin
[vite-plugin-vconsole]: https://github.com/vadxq/vite-plugin-vconsole