文章目录
- 一、前言
- 二、vConsole 简介
- 三、使用方法
- 3.1 引用 JS 文件方式
- 3.2 npm 依赖包方式
- 3.3 第三方插件
- 四、注意事项
- 五、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 文件方式
-
下载模块
checkout 文件dist/vconsole.min.js到本地。 -
引入模块
(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');
- 打印 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。
-
npm install vconsole-webpack-plugin --save-dev -
修改
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 即可。
- 修改
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;
}
通过以上样式设置，就可以解决遮挡问题。
六、拓展阅读
- 《Vue进阶（幺陆柒）：Vue项目调试技能》
- Vue-devtools Github地址
