Skip to content

MBFE Develop Helper README

MBFE Developer Helper 是满帮大前端开发助手，主要提供了以下5个能力：

1、前端H5开发的一键mock
      a、本地、qa、dev环境均可mock。
      b、线上环境debugger脚本注入后也可mock。
      c、请求数据改写后生成临时mock数据。
2、typescript项目api类型生成和mock数据生成。

3、日志管理控制面板。
      a、查看接口请求数据。
      b、查看console控制台数据.
4、遥控手机端的函数执行。

5、快速查找符合条件的线上数据。

一键mock：

痛点1：函谷关的mock需要权限申请，前端人员每次都要找服务端申请比较麻烦。

痛点2：函谷关无法mock转发类的接口，也无法mock接口超时场景。

痛点3：mock管理混乱，多人同时mock一个接口的场景容易窜掉。

痛点4：无法改写接口返回数据，生成一条临时mock数据。

本插件做法：满帮微前端的项目均会加载debugger调试脚本，该脚本会自动加载eruda以及满帮eruda插件，从而可在手机端一键开关mock能力，mock服务为本地服务，所以服务层是隔离的，因此不会出现mock混乱的问题，

若不是微前端项目请在项目中判断dev和qa环境后加载此脚本。

操作：

在测试环境点击eruda小齿轮后，输入电脑ip地址，连接到自己电脑中的本插件。

step1 :手机端操作满帮eruda插件配置。 step1 ，若连接失败点击下面的https连接，访问后返回该页面刷新即可。

step2 :pc端下载本插件，进入接口详情，点击本地mock（其实也可以mock qa环境和dev环境的）。 step2

step3 :临时mock能力：打开日志管理，点击查看接口返回数据，开启临时mock开关，刷新后即可显示更新的mock数据。 step3

生成API层代码：

痛点：服务端可以一键通过代码生成文档，目前还有很多同学手写接口类型，效率太低的同时还容易出错。

生成类型定义可以让我们的代码永远与服务端的类型同步，避免类型约定与实际不符导致的bug。

操作：

step1 :新接口初始化生成 step1 step2 :后期迭代过程中一键可跳转接口文档以及更新代码 step2

查看日志

痛点：函谷关日志无法抓取console控制台，bridge调用，以及非端上环境的接口调用日志。

手机端无线查看日志排查问题，连接本地的服务后，可以快速定位到日志内容。

操作：

step1: 确保手机端 eruda已经开启了mock调试、并显示连接成功、且勾选了查看日志 step1 step2: 下载本插件后下方有一个日志管理的按钮，点击后打开日志管理界面。 step2

hubble条件日志查询

痛点：hubble日志查询某种条件的数据如大海捞针需要一个一个的点开肉眼观察。

hubble数据需要寻找一条符合我们预期数据结构的数据，直接使用hubble平台的话数据太多，寻找如大海捞针，本插件输入一段命中条件的逻辑，得到符合条件的数据。

step1: 条件命中输入框输入条件逻辑，即可一键直达符合条件的数据示意图