1. 前言

开始正文之前我先讲一个我们真实的案例。

测试：现在这个小程序的 vconsole 不是很好用啊，看不到接口日志啊

开发：我在请求接口的时候加个 console 日志，你就能看到了

测试：哦看到了，但是这个字太小，还不能过滤，不是很好用啊！支付宝小程序的体验版本还没有这个 vconsole 调试工具！

开发：要不试试抓包软件，抓个包试试？？

测试：公司的电脑有各种安全限制、网络限制，抓包也不是很好弄啊！

开发：...那就先找找不限制的方案，或者用 vconsole 将就将就

测试：好.......

通过上面的一个案例我们可以了解到，目前小程序的调试针对开发同学来说不是很友好，更何况正式版本小程序没有 vconsole，所以我们需要改进优化下调试方式。

2. 痛点

小程序测试的痛点我们先简单总结罗列下：

vconsole 不是很完善，看不到接口日志
支付宝端小程序体验版本没有 vconsole
vconsole 不好用，加上接口日志，只是简单打印，没有查找过滤等一些能力
抓包软件目前存在网络限制
线上出现问题后不能实时拿到用户的日志信息

3. 改进思路

痛点有了，我们如何改进？首先我们要脱离 vconsole，毕竟我们不能对 vconsole 进行改进。我们还要避免网络限制和距离限制可远程抓取。针对这几点当时想了不少办法，但是有一次开发埋点需求，突然有了灵感，是不是日志抓取可以像这个埋点一样进行上报显示？我觉得可行，但是直接用埋点工具的话还是有不少的限制，那我们要不要做一款自己的工具？还有按照这个思路进行的话，不只能支持小程序，h5、app 也能支持。既然解决思路有了，那就开始开发这个工具吧！

4. 开发

工具定位

首先作为一个调试工具，不能局限于平台，使用要方便简捷。要具备扩展性，还能承载除日志调试之外的功能，后期能形成一个多功能的开发平台。故而决定将此工具做成 web 类型。

技术选型

经过一系列的研究并结合自身的实际情况，最终技术选型如下：

前端 vue3 + Arco Design Pro ****+ TS
服务端 nestjs
数据库 mysql
JSSDK 自研封装 JSSDK 进行数据上报

JSSDK 设计

通过 mixin 的方式嵌入小程序

// 核心逻辑加载
  loadCode() {
    let me = this;
    const mixin = {
      onLaunch(options) {
        // 进入应用上报数据
        me.launch(options, this);
        console.log("peanut 进入应用:", options);
      },
      onLoad(options) {
        const page = this.$scope ? this.$scope.route : "";
        me.load(
          {
            page: page, // 路由
            query: {
              ...options,  // 参数
            },
          }
        );
      },
      onError(e) {
        // 后续拓展监听错误
      },
    };
    // 项目注入
    const Vue = require("vue");
    (Vue.default || Vue).mixin(mixin);
  }
  
  /**
   * @description: 添加日志监听
   * @return {*}
   */
  addNetWorkListener({
    url,
    params,
    method,
    status,
    response,
    header,
    _id,
    requestType,
  }) {
    this.addRequestQueue({
      logCode: this.logCode || "",
      params,
      url,
      method,
      status,
      response,
      header,
      _id,
      requestType,
      ak: "2",
    });
  }

交互模型

UML 图.png

初版

5. 总结

目前这个工具正在开发阶段，日志调试整体的功能已经实现，但是一些细节还需再调试和优化，请大家敬请期待！

6. 团队介绍

「三翼鸟数字化技术平台-交易交付平台」负责搭建门店数字化转型工具，包括：海尔智家体验店小程序、三翼鸟工作台APP、商家中心等产品形态，通过数字化工具，实现门店的用户上平台、交互上平台、交易上平台、交付上平台，从而助力海尔专卖店的零售转型，并实现三翼鸟店的场景创新。

如何让小程序测试调试更加简单？