移动端开发增加debug调试--vconsole

公司开发的app是使用ionic开发的，在手机端开发调试的时候一些接口问题调试需要连接浏览器苹果手机使用safari自带的开发调试安卓手机使用chrome的inspect调试，十分不方便，因此领导提出有没有办法把接口报错在手机上显示出来，以便出问题不用连电脑就能好知道

经过调研于是有两种方法
1、将接口报错信息都是用提示框的形式展示出来
优点：开发方便，直接将错误信息输出即可
缺点：不美观，一旦多个接口报错弹出多个弹框操作不方便

2、使用vconsle将类似浏览器一样调试引入到手机中
优点：操作方便，错误信息看的全
缺点：需要调研，引入插件

权衡了一下最终选择了第二种 vconsole

vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

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

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）

或者使用 npm 安装：

npm install vconsole

添加到项目后如何使用
1.引入 vconsole文件中dist下的vconsole.min.js 到项目中
2.初始化VConsole

var VConsole = require('vconsole.min.js文件的路径一定要引对');
var vConsole = new VConsole();

创建之后就会出现下图的样子就成功啦

加入后vconsole样子

点开的样子

具体的官方文档
https://github.com/Tencent/vConsole/blob/v3.3.0/doc/tutorial_CN.md

在成功引入之后领导又要求可以控制这个vconsole的打开和关闭就是在正式版的时候也加入不过只有打开调试模式的时候才能看到

于是设置了变量控制他的显示和隐藏记录一下

// 打开或关闭调试的vconsole
  versionClk() {
    let debugOn = localStorage.getItem('debug');
    if (debugOn !== '1') {
      document.getElementById('__vconsole').style.display = 'block';
      localStorage.setItem('debug', '1');
    }else{
      document.getElementById('__vconsole').style.display = 'none';
      localStorage.setItem('debug', '0');
    }
  }