Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>MBFE Develop HelperNew to Visual Studio Code? Get it now.
MBFE Develop Helper

MBFE Develop Helper

jcyLite

|
124 installs
| (1) | Free
满帮大前端开发助手:包含生成接口类型、MBBridge日志、MBBridge mock
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MBFE Develop Helper README

Static Badge Static Badge

MBFE Developer Helper 是满帮大前端开发助手,主要提供了以下4个能力:

1、前端H5开发的一键mock

      a、客户端日志管理中直接修改返回值即可得到mock后的接口。
      b、bridge mock,可以协助模拟定位信息改变等。

2、api类型生成和mock数据生成。

      a、类型无需手抄,一键即可生成。
      b、新增的接口,一键即可根据类型生成mock。

3、日志管理控制面板。

      a、查看接口请求数据。
      b、查看console控制台数据,并可以执行临时方法。
      c、查看bridge调用数据。

4、条件日志快查。

      a、hubble日志根据某种条件查询出对应的日志。

一键mock:

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

痛点2:每次mock首先要输入用户id,如果是站外h5项目,因为没有id,所以还没办法mock。

痛点3:函谷关无法mock转发类的接口,也无法mock接口超时场景。

痛点4:MBBridge 无法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: 条件命中输入框输入条件逻辑,即可一键直达符合条件的数据 示意图

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft