hi ARAM

无/弱控制台场景的调试方案

2023/03/17

经常在手机、小程序这些环境调试的时候,会觉得调试起来没这么轻松。

虽然移动端有VCONSOLE,小程序也集成了这个东西,但结合一些场景,用起来还是有一些不顺手。

其中对于我来说最大的痛点就是记录日志比较麻烦,然后一个简单的LOG场景,要依赖埋点等传递到服务单,其实我就是想看看别人手机上的数据。

又或者说我期望把一个大LOG记录下来,但是又不想走埋点,其实只是本地调试的场景,没这么麻烦。

还有一点就是小程序调试阶段要频繁开体验版...每次开完扫码再拉起VCONSOLE,从一堆遗留DEBUG,或者自动DEBUG中找到自己的输出,很痛苦。

由上这些原因,产生了hrc-debug

hrc-debug可以理解成运行在服务端的console面板,把客户端使用console输出的内容同步输出到服务端。

也就是在开发阶段,本地有个服务会接收到客户端上来的内容并LOG,原理其实很简单,但是释放了我一部分调试阶段的重复劳动。

因为会自动打到本地服务端,之后就比较自由了,做少量的数据收集分析什么的会简单很多,也不用从手机端复制内容。

其使用几乎也是无感的,因为重写了console下的log/warn/error。

import HRCDebug from 'hrc-debug';
import { appear } from 'hrc-debug/release/appears/miniprogram.wx';

new HRCDebug({
  // /proxy/console这个接口是默认实现的
  server: 'http://127.0.0.1:3000/proxy/console',
  // 上报时调用的方法,本质就是个函数,完全可以自己实现,会传递过来每一批要上报的数据
  appear,
});

// 会在服务端和客户端同时输出
console.log('996');
console.warn('996');
console.error('996');

上一篇:React中useState初始值造成的性能问题
下一篇:CSS实现正方形