前端线上调试和错误日志

NO.1
前端线上调试

记录一些线上调试的方法

只要是C端的产品,每次发版上线总会有各种或多或少的大小问题

为了解决这些问题,需要提前设置好调试模式,方便查找原因,以及解决问题思路和方法

NO.2
测试页面

在本地开发,测试环境,以及线上环境,都要预写一个专门用于测试某些UI和交互的页面

如显隐单个组件,一些方法封装和API调用,mock数据等等

最近常用的为

1.导航组件,一些跳转特定页面带特定参数的按钮

2.UI组件显隐,使用mock数据,快速复现UI效果,不依赖API和真实数据和交互流程

3.设备信息,如型号,系统版本,各种ID,以及一些SDK支持结果,使用文字显示在页面,避免在设置或者其他地方一个一个找着看

4.全局参数设置,如开启自定义debug模式,设置特定请求参数等

NO.3
特殊页面参数

单独跳转页面带上指定的参数

如进入调试模式的debugModel

只有检测到生产环境,且页面路由参数为debugModel为xxx的时候

才会触发调试的一系列预制操作

如个人中心显示到测试页面的入口,吐司提示某些第三方携带的标识参数等

NO.4
交互提示

设置长按某个按钮显示当前页面url并自动复制到剪切板

进入页面就吐司提示某些参数值,校队数据正确性

进入测试页面参数设置组件,实时修改指定id,环境模式,等配置

NO.5
日志上报

一个是数据埋点,用于数据报表,业务需要,不用说也会会要求加入的功能

一个错误日志上报,用于记录错误信息,实时预警等,但一般不会加入的功能,因为需要服务器费用和人力精力以及时间成本,对业务没有明确的增益

开源的有sentry,fundebug或者选择自建一套

缺少了日志上报,也就无法记录数据,无法及时排查偶现的问题以及sourceMap定位等

NO.6
http抓包

最常见的问题是先排查API返回的数据对不对,不论是什么原因造成的

先找到问题,拿到数据,在查看交互,设备,参数,服务器等一系列的可能的影响因素

使用fiddle和charles抓包

NO.7
数据mock

单独mock数据

常见的有使用charles等代理本地数据,或者微调实时API数据字段值

使用特殊的账户登录,拥有指定的权限如管理员,全站会员等

NO.8
本地服务器

可以理解为本地服务启动为正式环境

在云真机或者模拟器中运行正式环境

复现某些bug和问题

本地服务器的好处是可以代码级调试,打印日志和断点以及数据查看都很方便