前端探索vConsole花式用法

Posted 2022-01-29 luciozhang

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

接入

接入很简单，考虑到其虽然轻量但是也有几十kb，我们一般选择动态引入。

loader('https://unpkg.com/vconsole@latest/dist/vconsole.min.js',() => 
        var vConsole = new window.VConsole();
);

示例

引入之后就可以在你开发的页面上，看到Overview、Log、Network、Element、Storage等多个栏目了。

http://wechatfe.github.io/vconsole/demo.html

花式用法！

接入vConsole确实极大方便了我们调试和发现问题，但是这样就足够了吗？

不是的，我们还有更多的玩法。

vConsole本身支持我们自定义插件，来实现定制化的使用需求，我们来看下基于vConsole，我们还能开发出什么样的玩法。

学习一下插件文档

• 插件：入门
• 插件：编写插件
• 插件：Event 事件列表

报bug神器：一键反馈

以前看到过一个问题，“前端同学怎么避免成为Bug路由器？”

确实，不管是前端的问题，后台接口的问题，服务器的问题，测试人员第一个问的总是前端开发，因为前端开发是一个应用开发过程中，最后整合各种资源的人。出Bug时，谁是具体的负责人，一般也是前端开发最清楚的。

这些路由器的工作，有时候也确实挺占用我们的时间的，我们无法改变成为路由器的现状，那不妨努力成为一个更高效的路由器。

而成为高效路由器的关键，就是不管何时何地什么人，只要应用出现问题，马上就能定位到问题。

这时候我们需要一个一键反馈的神器，出现问题的测试人员，只要在页面上按一个按键，开发者马上就能拿到出现问题的页面所处的环境。

首先，我们为vConsole添加一个“反馈”tab。

const feedbackPlugin = new VConsole.VConsolePlugin('tip_login', '反馈');

feedbackPlugin.on('init', function () 
    // do something
);

为了复现问题，我们需要页面的url、浏览器的UA、用户的uid、页面的cookie，同时为了快速发现问题，我们需要页面上发生的网络请求信息，以及用户的日志。

// 获取页面信息
const url = window.location.href;
const uid = app.tip_uid;
const UA = navigator.userAgent;
const  cookie  = document;

// 获取网络请求信息
const getNetworkInfo = function () 
    const  reqList  = window.vConsole.pluginList.network;
    const request = [];
    Object.keys(reqList)
      .forEach((key) => 
        const item = reqList[key];
        request.push(
          url: item.url,
          status: item.status,
          getParam: item.getData,
          postParam: item.postData,
          costTime: item.costTime,
          response: item.response,
        );
      );
    return request;
;

// 获取日志信息
const getLogInfo = function () 
    return window.vConsole.pluginList.default.$tabbox.innerText;
;

为了方便测试人员理解，我们在vconsole的界面上，加一下提示文案。

const html = `
   <div class="vc-item vc-item-info"><p>点击下方【复制...】按钮，复制信息发送给开发人员</p>
   <p>点击下方【一键反馈】按钮，发送当前环境日志给开发人员</p></div>
   <div class="vc-item vc-item-log"><p>页面链接：$url</p></div>
   <div class="vc-item vc-item-log"><p>用户uid：$uid</p></div>
   <div class="vc-item vc-item-log"><p>浏览器UA：$UA</p></div>`;

feedbackPlugin.on('renderTab', (callback) => 
    callback(html);
);

再给反馈tab，加一些复制信息的按钮。

const btnList = [];
btnList.push(
    name: '复制用户信息',
    global: false,
    onClick() 
      const userInfo =  url, uid, UA, cookie ;
      copyInfo(JSON.stringify(userInfo));
    ,
);
btnList.push(
    name: '复制网络请求',
    global: false,
    onClick() 
      const request = getNetworkInfo();
      copyInfo(JSON.stringify(request));
    ,
);
btnList.push(
    name: '复制日志',
    global: false,
    onClick() 
      const log = getLogInfo();
      copyInfo(log);
    ,
);
feedbackPlugin.on('addTool', (callback) => 
    callback(btnList);
);

为了更方便地一次发送全部信息，我们加上一个“上报”按钮。reportFeedbackInfo上报接口，可以自己实现后台服务，也可以接入已经在用的日志系统。

btnList.push(
    name: '上报',
    global: false,
    onClick() 
      reportFeedbackInfo(
        uid,
        UA,
        url,
        cookie,
        log: getLogInfo(),
        request: getNetworkInfo(),
      ).then(() => 
        alert('上报成功，请通知开发人员查看');
      );
    ,
);

最后的成果见下图，有了这个神器，再也不用担心出现Bug定位不到问题了。

现网验证神器：一键环境切换

当应用的后台接口，有测试、开发、和现网等多种环境的时候。我们在测试环境测试完功能，一般还需要在现网环境验证一下。但我们并不想直接发布现网，担心影响线上的真实用户，这时候我们就需要一个预发布环境，但是如果我们没有呢？有没有替代的方案？

不如这样，我们在vConsole上添加一个入口，支持一键切换CGI的域名，从而实现一键切换环境的需求。

下面代码，是通过vConsole切换sessionStorage里面tip_debug_cgi_env的值，CGI请求的时候，根据该值来切换测试和现网环境。

const envPlugin = new VConsole.VConsolePlugin('tip_tool', '切换环境');

const html = '<div>请点击下方按钮，切换测试/正式环境</div>';
envPlugin.on('renderTab', (callback) => 
    callback(html);
);

envPlugin.on('addTool', (callback) => 
    const toolList = [];
    toolList.push(
      name: '测试环境',
      global: false,
      onClick() 
        console.log('已切换为测试CGI，即将刷新页面......');
        window.sessionStorage.setItem('tip_debug_cgi_env', 'test');
        setTimeout(() => 
          location.reload();
        , 1000);
      ,
);
toolList.push(
      name: '现网环境',
      global: false,
      onClick() 
        console.log('已切换为正式CGI，即将刷新页面......');
        window.sessionStorage.setItem('tip_debug_cgi_env', 'prod');
        setTimeout(() => 
          location.reload();
        , 1000);
      ,
    );
    callback(toolList);
);
return envPlugin;

插件编写完成，别忘记添加到vConsole实例对象。

window.vConsole = new VConsole();
window.vConsole.addPlugin(feedbackPlugin);
window.vConsole.addPlugin(envPlugin);

总结

除了上述的用法，vConsole自定义插件还有更多实用的用法，有别的想法也欢迎下方评论下。