whistle自定义修改接口返回值内容

修改接口返回值内容是前端想要验证后续交互逻辑,但是又不想去找测试/后端造数时,常见的手段。

如果是在浏览器,我们可以很轻松的就修改接口的返回值内容,如下图的sugrec?&prod=pc_his&from=pc_web&json=1&imod=2 这个接口

我们只需要 单击选中 -> 右键 ->替换内容

之后如下图,我们就可以随心所欲的修改返回值的内容了,比如把我在CSDN的名称从'北北'改成'哈基米',ctrl+s保存。(这里的brower_override是我本地D盘自定义的一个文件夹,因为要把覆盖修改的返回值内容找个地方存起来,所以这里如果第一次修改返回值内容,可能还需要配置一下)

后面再一次刷新,就可以看到交互已经被正确修改展示

但是如果是安卓,IOS手机测试。不像浏览器那般容易mock接口返回值。

就可以使用whistle的mock功能。

whistle的下载和基础功能,可以参考其他文章,自定义返回值内容可以如下操作

1.先在Values里面定义一个json文件

2.再按照 要代理的接口 代理的内容的写法,把刚刚获取用户信息的接口代理到刚刚定义的userInfo.json文件上

3.使用zeroOmega,开启whistle代理环境(这里对于zeroOmega不熟悉的,可以参考其他文章或者询问AI,来知道该插件的功能是干嘛的)

展示成果:

1.这里发现接口成功被whistle代理了

2.同时我在whistle里mock的返回值也成功生效,并且能够影响浏览器前端的交互展示逻辑。

接口返回值内容成功通过whistle修改。


小总结:上述只是一个基础的演示,mock返回值在日常其他一些比较复杂的业务场景下走不同的逻辑分支是有挺大用处的,可以多尝试一下。

相关推荐
深蓝AI10 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒11 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=011 小时前
Vue 3 模板语
前端·javascript·vue.js
用户76103044737111 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿11 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺11 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李12 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying12 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一12 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js12 小时前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化