降本增效工具系列（一）：移动端调试利器 vConsole_react vconsole

---

一、前言

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

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

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

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

二、vConsole 简介

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

手机预览

特性

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

三、使用方法

3.1 引用 JS 文件方式

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

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

<script src="path/to/vconsole.min.js"></script>
1

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

var vConsole = require('path/to/vconsole.min.js');
1

3. 打印 log 日志

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

console.log('Hello World');
1

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

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

> - console.log('foo'); // 白底黑字
> - console.info('bar'); // 白底紫字
> - console.debug('oh'); // 白底黄字
> - console.warn('foo'); // 黄底黄字
> - console.error('bar'); // 红底红字
1
2
3
4
5

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

var obj = {};
obj.foo = 'bar';
console.log(obj); // 打印出 {foo: 'bar'}
1
2
3

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

var uid = 233;
console.log('UserID:', uid); // 打印出 UserID: 233
1
2

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

// 若未通过 AMD/CMD 方式加载模块，
// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole
vConsole.ready(function() {
	console.log('Hello World');
});
1
2
3
4
5

3.2 npm 依赖包方式

执行命令 npm i vconsole。

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

import  VConsole  from  'vconsole';
let vConsole = new VConsole();
console.log("test");
1
2
3

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
    })
  ],
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

3. 修改package.json配置文件，dev部分指令如下：

"dev": "webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js",
1

四、注意事项

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

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

五、vConsole 遮挡问题解决

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

.vc-switch {
	right : 100px;
}
1
2
3

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

六、拓展阅读

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