诶,这么好用的 mock 你怎么不早说

前言

老板:小王啊,你 bug 率也太高了,得想想办法,不然扣你绩效。 小王眼里闪过一分无奈二分心酸三分苦涩四分身不由己,很多条件 case、边缘 case 都不好触发,很难自测充分,比如:

  • 新手引导,标识由后端下发,申请个新账号非常麻烦
  • 各类状态的流转,比如 xx 任务失败,但是大多数情况下都走不到失败路线
  • 余额为 0 的情况下的各种 case,测试账号往往都是拉满的余额
  • vip 与普通用户的各种差异点

对这类的情况,就只能盲写,然后手动在代码里改状态来大致看一下效果,就很难模拟出一个完整的流程,会出 bug 也属实正常。

有心急的同学就要说了,mock 呀,用 mock 呀!

话虽如此,但是要使用这一套,一是你需要起服务/开程序、写数据、运行,这一套下来还是比较费时间的。二是此类问题绵绵无绝期,每次都这么搞,时间成本会无限累加。

而且频繁调试往往会弄脏代码,很容易提交上一些调试数据,有没有更简单好用的方案呢?

有的有的(掏出 chrome),这么简单的方案还有一个,那就是我们常打交道的控制台了。

chrome 之替换

这里举个实际例子带大家走一遍,比如我是掘金的前端,我想测试一下文章审核中的样式

但是总不能回回都重新写一个审核中的文章供自己测试,费时费力。已知审核中的状态由后端 dynamic 接口的 audit_status决定,该状态为 1 时会展示审核中,为 0 时是正常。

先看一下最终实现的效果吧,只需要简单的操作就可以开闭 mock,而且不侵入代码:

OK,再说下详细使用步骤:

  1. 在网络中找到目标接口
  2. 右键进行替换
  3. 如果是首次使用,会有个提示,需要你选择一个文件夹来存放数据
  4. 此时会进入到替换的编辑页,该页面可能为刚才请求的内容,也有时候为空。 如果为空的话,可以先去刚才的响应里复制,再贴过来
  5. 接着就可以自行修改响应的内容了:这里我们把audit_status从0改为1
  6. ctrl s 保存后,刷新页面即可看到效果

大功告成,虽然看起来步骤很多,但大多数情况下实际上只需要右键替换,编辑保存两步就完事了,既方便启用,又不侵入代码。

相关推荐
LaughingZhu2 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫2 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux3 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水4 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger4 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)4 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态4 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态4 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart4 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe54 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架