根据 API 接口描述(接口地址、请求方式、响应 TS 类型)生成 Chrome DevTools Local Overrides 格式的 Mock 数据文件,并直接创建到指定目录。当用户提到"mock 数据"、"本地替换"、"接口 mock"、"Chrome Overrides"、"API 调试"等关键词时使用此技能。
API Mock Data Generator(Chrome Local Overrides)
功能概述
API Mock Data Generator(Chrome Local Overrides)是一项面向实际任务的技能,主要用于解析输入 :提取接口地址、请求方式、环境、响应类型;生成 Mock JSON :按响应类型和字段语义生成逼真数据;
核心要点
- 创建文件 :直接使用 Write 工具将 mock 文件写入 overrides 目录;
- 输出摘要 :展示文件路径、关键数据预览、Chrome 配置提示;
- 未指定环境时。
使用与执行
它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。
API Mock Data Generator(Chrome Local Overrides)
工作流程
- 解析输入:提取接口地址、请求方式、环境、响应类型
- 生成 Mock JSON:按响应类型和字段语义生成逼真数据
- 创建文件:直接使用 Write 工具将 mock 文件写入 overrides 目录
- 输出摘要:展示文件路径、关键数据预览、Chrome 配置提示
环境域名
未指定环境时默认 test。
| 环境 | 域名 |
|---|---|
| test(默认) | test-sino-gateway.sinoclick.com |
| pre | pre-sino-gateway.sinoclick.com |
输入字段
| 字段 | 必须 | 说明 |
|---|---|---|
| 接口地址 | ✅ | 如 /api/user/list |
| 请求方式 | ✅ | GET / POST / PUT / DELETE |
| 响应参数 TS 类型 | ✅ | TypeScript interface 或 JSON 结构 |
| 接口环境 | 可选 | test / pre,默认 test |
| 接口描述 | 可选 | 功能说明 |
| 数组条数 | 可选 | 数组字段生成条数,默认 5 |
| mock 场景 | 可选 | success(默认)/ error / empty |
文件路径规则
格式:{OVERRIDES_DIR}/{域名}/{url路径段...}/{最末段}
- 文件名无扩展名(Chrome Local Overrides 约定)
OVERRIDES_DIR默认为项目根目录下的overrides/(即{项目根目录}/overrides)- 路径参数(如
{id})替换为示例值(如12345)
示例:/api/user/list + test 环境 →
{项目根目录}/overrides/test-sino-gateway.sinoclick.com/api/user/list
Mock JSON 生成规则
响应外层结构(固定)
每个 mock 响应必须包含以下固定外层,无论用户的 TS 类型是否声明:
{
"code": 0,
"message": "成功",
"success": true,
"result": "...按 TS 类型生成...",
"traceId": "生成 UUID"
}
mock 场景变体
| 场景 | result 值 | code | message |
|---|---|---|---|
| success(默认) | 按类型生成 | 0 |
"成功" |
| error | null |
500 |
"服务器内部错误" |
| empty | [] 或 null(视类型) |
0 |
"成功" |
字段语义推断
根据字段名自动推断合理的 mock 值:
| 字段名模式 | 生成策略 |
|---|---|
*url* / *Url* / *link* |
合法 URL |
*imageUrl* / *img* / *cover* / *thumbnail* |
https://picsum.photos/id/{固定数字}/宽/高,数字从 10~200 中按字段索引递增选取(如第 1 个图片字段用 10,第 2 个用 11),确保同一接口内不重复且每次生成结果一致 |
*videoUrl* / *video* |
从以下列表中按字段索引顺序依次选取:http://vjs.zencdn.net/v/oceans.mp4、https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4、http://www.w3school.com.cn/example/html5/mov_bbb.mp4、https://media.w3.org/2010/05/sintel/trailer.mp4 |
*signUrl* / *SignUrl* / *ossUrl* / *OssUrl* |
视为媒体资源 URL,需根据上下文判断类型:若同一类型中存在 video/Video 相关字段名提示,或字段注释/描述含"视频",则按 videoUrl 策略生成;否则默认按 imageUrl 策略生成 |
*avatar* |
https://i.pravatar.cc/150?u={随机} |
*date* / *time* / *Time* / *Date* |
ISO 日期或 yyyy-MM-dd HH:mm:ss |
*id* / *Id* / *uuid* |
UUID 或 6 位数字 ID |
*name* / *Name* / *title* |
合理的中文/英文名称 |
*email* |
合理邮箱 |
*phone* / *mobile* |
合理手机号 |
*amount* / *price* / *spend* / *cost* |
100~10000,保留 2 位小数 |
*count* / *num* / *quantity* |
1~500 整数 |
*rate* / *ratio* / *roas* / *roi* |
0.1~10,保留 2 位小数 |
*status* |
枚举值中随机选一个 |
*description* / *desc* / *remark* |
一段合理的描述文本 |
数组与分页
- 数组默认 5 条,每条数据应有合理差异
- 联合类型枚举值在数组中尽量覆盖
- 若存在
total/totalCount字段,值设为大于数组长度(如数组 5 条,total 设 23)
执行方式
首选:直接创建文件
使用 Shell 工具执行 mkdir -p 创建目录,再使用 Write 工具写入 mock JSON 文件:
1. Shell: mkdir -p {项目根目录}/overrides/{域名}/{路径目录}
2. Write: 写入 mock JSON 到目标文件路径
3. 输出确认信息
备选:输出 shell 脚本
当用户明确要求"给我脚本"或在非 Cursor 环境时,输出可执行脚本:
#!/bin/bash
OVERRIDES_DIR="{项目根目录}/overrides"
DOMAIN="{域名}"
mkdir -p "${OVERRIDES_DIR}/${DOMAIN}/{路径目录}"
tee "${OVERRIDES_DIR}/${DOMAIN}/{完整路径}" > /dev/null << 'MOCKEOF'
{...mock JSON...}
MOCKEOF
echo "✅ Mock 文件已创建"
批量处理
当用户提供多个接口时:
- 逐个生成 mock JSON
- 合并为一个 shell 脚本(共享配置区),或依次使用 Write 工具创建
- 最后汇总输出所有文件路径
输出格式
每次输出包含以下部分:
1. 文件目录结构
用 tree 格式展示:
overrides/
└── {域名}/
└── api/
└── user/
└── list ← 无扩展名
2. Mock 文件内容
展示完整 JSON(供用户确认)。
3. 创建确认
文件创建后输出路径和环境信息。
4. Chrome 配置提示(仅首次)
首次生成时附上配置步骤:
- DevTools (F12) → Sources → Overrides
- 点击 + Select folder for overrides → 选择项目根目录下的
overrides文件夹 - 允许访问权限
- 勾选 Enable Local Overrides
- 刷新页面验证(Network 面板中被替换请求带 ⚠️ 标记)
热门AI工具
相关专题
Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。
0
2026.10.28
Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。
0
2026.10.28
Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。
0
2026.10.28
本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。
0
2026.10.22
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.6万人学习
共6课时 | 54.7万人学习