1. 这不是“造数据”而是前端联调的呼吸节奏控制术Mock 接口数据实操规则改写和断点拦截的联调——这标题里藏着三个被日常开发严重低估的关键动作数据可控性、请求可塑性、交互可暂停性。它不是教你怎么用一个工具生成假JSON而是解决一个真实到让人皱眉的现场问题后端接口还没上线UI已交付测试用例要跑通产品经理在群里你问“页面空白是不是你代码没写好”而你心里清楚是那个叫/api/v2/user/portfolio/summary的接口还在联调环境里打盹。这时候Mock 不是备胎是主驾规则改写不是配置项是翻译器断点拦截不是调试开关是时间暂停键。我带过六支前端团队90% 的联调阻塞不是出在代码逻辑而是卡在“等接口”这个单点上。真正高效的 Mock 实践必须同时满足三个硬指标第一前端能独立构造任意结构、任意状态码、任意延迟的响应比如模拟网络超时返回504或模拟登录态失效返回401第二能对真实发出的请求做动态重写——把/dev-api/user临时映射成/mock/user甚至把请求体里的userId123替换成userId999用于边界测试第三能在请求发出前、响应返回后、甚至响应流中间任意位置插入断点像外科医生一样精准切开HTTP生命周期查看原始请求头、修改响应体字段、注入错误信息再放行。这三个能力叠加才构成完整的“联调呼吸控制”。它不依赖后端进度不污染生产环境更不靠“我本地能跑”这种模糊承诺。尤其在金融、电商这类强状态、多分支场景下mock 数据必须能表达“持仓为0但有挂单”、“订单已支付但风控未通过”、“行情推送中断后重连成功”等复合状态——这些根本不是随机生成的JSON能覆盖的。所以别再搜“charles mock数据教程”只学怎么配host了今天这篇我们从真实项目日志出发拆解一套可落地、可审计、可交接的 Mock 联调工作流。2. 整体设计思路为什么必须三线并行而不是单点突破2.1 单一Mock工具的致命盲区它只管“输出”不管“输入”和“过程”很多团队起步就选 Mock Server 类工具如 Mockoon、WireMock理由很实在界面友好、启动快、JSON写得顺。但三个月后必然遇到三类典型卡点第一前端发的是https://prod-api.example.com/user/profileMock Server监听的是http://localhost:3000/mock/user/profile你得全局替换所有fetch调用里的URL或者让Webpack DevServer做代理重写——一旦代理规则写错整个页面白屏排查成本远高于写Mock本身第二想测试“用户余额不足时提交订单失败”的场景需要后端返回特定错误码错误文案但Mock Server只能静态返回预设JSON无法根据请求体里的amount99999动态判断是否触发余额校验逻辑第三最要命的是当发现某个接口返回的数据格式和文档不符时你根本看不到原始请求到底发了什么——Header里少传了X-Auth-TokenQuery参数拼错了Body里日期格式是2024-01-01还是2024/01/01Mock Server作为服务端天然收不到请求发起前的状态。这就导致一个问题Mock解决了“有没有数据”却放大了“数据对不对”的不确定性。我去年接手一个股票行情项目前端反复报“K线图不渲染”查了两天才发现是WebSocket连接时前端漏传了marketSH这个Query参数而Mock Server压根不记录请求元信息所有排查都靠猜。2.2 三线并行架构让Mock成为可观察、可干预、可验证的透明管道我们最终落地的方案是把Mock能力拆解为三个协同层每层解决一类问题且全部运行在开发者本地第一层请求拦截与重写层Charles/Fiddler/浏览器DevTools Network面板它位于浏览器和真实服务器之间像交通指挥中心能看见每一辆“请求车”的车牌URL、载货清单Headers/Body、目的地Host。核心价值是零代码侵入式重定向不用改一行业务代码就能把所有/api/开头的请求实时重写为/mock/路径还能动态修改请求参数比如把?page1size10改成?page1size1强制触发分页异常甚至能注入自定义Header模拟不同登录态。这一层解决的是“请求能不能被正确捕获和改造”。第二层规则驱动Mock层基于MSW或自研轻量Mock引擎它不直接监听端口而是作为前端代码的一部分在浏览器内存中运行。通过声明式规则如rest.get(/api/user/:id, (req, res, ctx) {...})匹配请求并返回动态响应。关键优势在于上下文感知能读取req.url.searchParams.get(id)能解析req.body能根据当前时间计算Date.now() deadline返回不同状态。我们曾用它模拟“交易时段内允许下单非交易时段返回维护中”的逻辑纯靠JSON配置根本做不到。这一层解决的是“响应能不能按需生成”。第三层断点调试层浏览器DevTools的XHR Breakpoints 自定义拦截钩子它不是附加功能而是贯穿前两层的“手术刀”。在Chrome DevTools里设置XHR/fetch断点请求发出瞬间自动暂停你能看到完整的Request Headers、Payload、Response Headers甚至能手动编辑响应体再继续执行。更进一步我们在MSW规则里嵌入debugger语句或在Charles里配置“Break on Response”实现毫秒级介入。这一层解决的是“整个链路能不能被完整观测和干预”。这三层不是替代关系而是流水线请求先被拦截层捕获并重写 → 重写后的请求进入规则层匹配并生成响应 → 响应返回前由断点层捕获供人工检查。三者缺一不可。比如测试“弱网环境下订单提交超时”你需要拦截层将/api/order/submit重写为本地Mock地址规则层设置ctx.delay(8000)模拟8秒延迟断点层在响应返回前暂停手动修改状态码为0模拟网络中断。单点工具永远无法覆盖这种组合场景。2.3 为什么放弃“一站式”方案安全、可控、可审计是底线市面上确实有“All-in-One”工具比如Postman Mock Server配合Proxy或某些IDE插件。但我们明确拒绝原因有三第一安全边界模糊。这类工具常要求你配置“信任所有HTTPS证书”或“允许本地代理”一旦配置失误真实生产请求可能被劫持。我们曾发现某团队用某款国产Mock工具因SSL配置错误导致测试环境的/api/login请求被重定向到本地用户密码明文暴露在控制台日志里。第二行为不可审计。当出现“Mock数据突然不生效”时你无法快速定位是规则没匹配、拦截没生效还是断点被误关。而分层架构下每层都有独立日志Charles显示“Request intercepted for /api/user”MSW控制台打印“[MSW] GET /mock/user matched”DevTools Network面板标记“Paused on fetch”。三份日志交叉验证5分钟内必定位。第三技术栈绑定风险。所谓“Vue3 TS的mock使用教程”本质是教你怎么在Vite配置里加server.proxy。但当项目后期接入微前端主应用用React、子应用用Vue代理规则会变成维护噩梦。而我们的分层方案拦截层在浏览器端规则层在各子应用独立配置完全解耦。所以这不是炫技而是用稍高的初期学习成本换取后期90%的联调时间节省。当你能对着产品经理说“这个需求我明天就能给你可交互Demo不需要等后端”你就掌握了前端真正的主动权。3. 核心细节解析规则改写与断点拦截的实操铁律3.1 规则改写的三大禁区URL重写、Header篡改、Body注入的生死线规则改写不是简单的字符串替换而是HTTP协议层面的精密手术。我见过太多人栽在看似微小的细节上导致Mock环境和真实环境行为不一致最终上线翻车。第一禁区URL重写必须保留原始协议与Host头常见错误操作在Charles里把https://prod-api.example.com/api/user重写为http://localhost:3000/mock/user。表面看能拿到数据但埋下两个雷雷一前端代码里如果有window.location.origin拼接API地址的逻辑比如上传文件时用origin /upload重写后origin仍是https://prod-api.example.com但请求发到了http://localhost跨域报错雷二某些金融接口强制校验Referer或OriginHeader重写URL后这些Header没变但服务端一看“你从生产域名来却访问本地Mock”直接拒绝。正确做法使用Charles的“Map Remote”功能将prod-api.example.com这个Host映射到localhost:3000同时保持URL路径和协议不变。这样浏览器发出的仍是https://prod-api.example.com/api/userCharles在DNS层将其指向本地服务端收到的Host头、Referer头、Origin头全部真实只是流量被本地截获。实测下来这是唯一能100%模拟真实网络环境的方案。第二禁区Header篡改必须区分“可信Header”与“敏感Header”哪些Header绝对不能动Cookie、Authorization、X-Requested-With。动了Cookie登录态丢失动了AuthorizationJWT校验失败动了X-Requested-With后端可能拒绝非AJAX请求。但有些Header必须改比如金融接口要求X-App-Version: 3.2.1而你本地版本是3.3.0不改就会被限流。安全改法在Charles的“Rewrite”规则里只针对特定URL路径启用Header修改。例如仅对/api/trade/开头的请求添加X-App-Version: 3.2.1其他请求保持原样。同时所有Header修改操作必须记录在团队Wiki里标注“此Header为模拟旧版本客户端所必需上线前必须删除”。我们曾因忘记删这条规则导致灰度发布时部分用户被识别为旧版触发了错误的降级策略。第三禁区Body注入必须严格遵循Content-Type语义很多人直接在Charles里编辑Request Body把{amount:100}改成{amount:99999}结果接口返回400。原因很简单如果原始请求Header是Content-Type: application/json你改Body没问题但如果Header是Content-Type: application/x-www-form-urlencoded你却用JSON格式编辑后端解析必然失败。铁律操作在Charles的“Breakpoint”模式下右键点击请求 → “Edit Request” → 切换到“Headers”标签页确认Content-Type值再切换到“Body”标签页根据类型选择编辑方式JSON用“JSON”视图Form用“Form”视图Raw用“Raw”视图。我们团队强制规定所有Body修改必须截图存档包含Headers截图和Body编辑界面截图作为联调报告附件。这看似繁琐但避免了“明明改了数据却说没生效”的扯皮。3.2 断点拦截的黄金四象限何时该断、断在哪、断后做什么、断后如何放行断点不是越多越好而是要精准打击关键决策点。我们总结出HTTP生命周期的四个黄金断点位置每个位置对应不同的调试目标断点位置触发时机典型调试目标操作建议风险提示Request Headers请求发出前Headers已组装完成检查认证Token是否有效、Host是否正确、自定义Header是否缺失查看Authorization值是否为JWT且未过期核对Host是否为预期域名确认X-Trace-ID是否生成不要在此处修改Headers后直接放行可能破坏签名逻辑Request Body请求发出前Body已序列化验证提交数据格式、边界值、敏感字段脱敏检查amount是否为数字而非字符串确认phone字段是否已脱敏为138****1234验证file字段是否为Blob对象修改Body后务必重新计算Content-Length否则后端接收不全Response Headers响应返回后Headers已接收分析缓存策略、重定向跳转、错误码含义查看Cache-Control是否为no-cache确认Location头是否指向正确URL解读X-RateLimit-Remaining剩余调用次数此处修改Headers可能导致前端缓存异常仅用于临时测试Response Body响应返回后Body已接收但未解析修复数据格式、注入测试字段、模拟异常结构将{code:0,data:{}}改为{code:500,msg:mock error}在data里添加__mock_timestamp: Date.now()便于追踪把空数组[]改为[{id:1,name:test}]修改Body后需确保JSON语法正确否则前端JSON.parse()报错实操心得不要依赖“自动断点”。比如想测试“接口超时”很多人在Response Body断点然后手动延迟。这是错的——超时发生在TCP连接建立或响应头接收阶段Body断点时连接早已建立。正确做法是在Charles里配置“Throttle”限速将网络设为“GPRS”此时请求自然超时你能在Network面板看到Failed to load response data这才是真实超时场景。同样“401未授权”测试应该在Request Headers断点删除Authorization头后放行而不是在Response Body里伪造401响应——前者能触发前端真实的登录态失效流程后者只是个静态错误页。3.3 Mock规则编写的反直觉原则状态驱动优于数据驱动副作用最小化新手写Mock规则本能是“我要返回什么数据”比如return { code: 0, data: { balance: 10000 } }。这会导致两个问题一是规则和业务逻辑耦合二是无法模拟真实服务的副作用如扣款后余额变更、下单后库存减少。我们推行“状态驱动”规则即规则描述的是系统当前状态而非静态数据。案例股票委托单状态机模拟真实场景中委托单有“已报”、“部成”、“已成”、“已撤”、“废单”五种状态且状态流转受时间、价格、市场状态影响。如果写五个静态JSON测试覆盖率极低。我们用MSW编写如下规则// 模拟委托单查询接口 rest.get(/api/order/:orderId, (req, res, ctx) { const orderId req.params.orderId; // 从内存状态机获取当前订单状态 const orderState getOrderState(orderId); // 状态机函数根据orderId返回状态 // 根据状态返回不同结构 switch(orderState) { case SUBMITTED: return res( ctx.status(200), ctx.json({ code: 0, data: { orderId, status: SUBMITTED, submitTime: Date.now() - 60000, // 1分钟前提交 price: 10.5, volume: 1000 } }) ); case PARTIAL_FILLED: return res( ctx.status(200), ctx.json({ code: 0, data: { orderId, status: PARTIAL_FILLED, submitTime: Date.now() - 120000, fillTime: Date.now() - 30000, // 30秒前部分成交 price: 10.5, volume: 1000, filledVolume: 300, // 已成交300股 avgFillPrice: 10.48 } }) ); // ... 其他状态 } });关键点getOrderState()是一个可配置的内存状态机我们提供CLI命令mock-state set-order-status 12345 PARTIAL_FILLED测试时一键切换状态无需重启服务。这比写十个JSON文件高效十倍。副作用最小化原则Mock规则里禁止任何外部I/O操作。曾有同事在规则里调用fs.readFileSync(./config.json)读取配置导致每次请求都触发磁盘IO页面加载慢3秒。正确做法是启动时一次性读取配置到内存规则里只做纯函数计算。我们约定所有Mock规则函数必须是无副作用、确定性、可缓存的。这意味着同一个请求参数永远返回相同响应除非你主动修改状态机。4. 实操过程从零搭建可交付的Mock联调环境4.1 环境准备三件套安装与基础配置10分钟搞定第一步Charles安装与HTTPS抓包配置下载Charles Proxy官网正版避免破解版证书风险安装后打开。关键配置有三处SSL Proxying菜单栏Proxy → SSL Proxying Settings勾选Enable SSL Proxying在Locations里添加*通配所有域名。这是为了抓取HTTPS请求但必须配合下一步证书安装Install Charles Root Certificate菜单栏Help → SSL Proxying → Install Charles Root Certificate按向导安装到系统钥匙串并在钥匙串里双击证书 → “信任” → “始终信任”。这一步漏掉所有HTTPS请求会显示SSL handshake failedLocal Proxy Port菜单栏Proxy → Proxy Settings确认端口为8888默认这是后续所有工具对接的端口。提示如果公司电脑管理员禁用了证书安装可用浏览器DevTools的Network面板替代Charles但会失去Host重写能力。此时必须用Webpack DevServer代理配置proxy: { /api: { target: http://localhost:3000, changeOrigin: true } }代价是每次改代理都要重启服务。第二步MSW初始化与Vite集成我们以Vite Vue3 TypeScript项目为例其他框架同理# 1. 安装MSW npm install -D msw # 2. 创建mocks/handlers.ts定义基础规则 import { rest } from msw export const handlers [ rest.get(/api/user/profile, (req, res, ctx) { return res(ctx.status(200), ctx.json({ code: 0, data: { name: Mock User, balance: 10000 } })) }), ]// 3. 创建mocks/browser.ts浏览器端启动入口 import { setupWorker } from msw import { handlers } from ./handlers export const worker setupWorker(...handlers)// 4. 在src/main.ts最顶部引入必须在app.mount前 import { worker } from ./mocks/browser if (process.env.NODE_ENV development) { worker.start({ onUnhandledRequest: bypass // 未匹配规则的请求放行给真实服务器 }) }关键验证启动Vite服务后打开浏览器DevTools → Application → Service Workers能看到MSW注册成功Network面板里所有/api/请求的Size列会显示(from service worker)证明MSW已接管。第三步VS Code调试配置可选但强烈推荐在项目根目录创建.vscode/launch.json{ version: 0.2.0, configurations: [ { type: pwa-chrome, request: launch, name: Launch Chrome with Mock, url: http://localhost:5173, webRoot: ${workspaceFolder}, sourceMaps: true, trace: true, runtimeArgs: [ --remote-debugging-port9222, --proxy-serverlocalhost:8888, // 关键让Chrome走Charles代理 --proxy-bypass-list-loopback ] } ] }这样F5启动后Chrome自动走Charles代理无需手动设置浏览器代理。我们团队所有成员都用此配置统一环境。4.2 规则改写实战金融行情接口的动态重写链以一个真实金融项目为例生产环境行情接口为wss://quote-prod.example.com/wsWebSocketREST接口为https://api-prod.example.com/v1/quote。前端代码里硬编码了api-prod.example.com但我们希望开发时所有api-prod.example.com请求重写为本地Mock测试时部分请求如/v1/quote/stock仍走真实环境只Mock/v1/quote/fund上线前一键关闭所有Mock回归真实环境。Charles配置步骤Proxy → Recording Settings勾选Record HTTP Headers和Record HTTPS Headers确保能查看完整请求Tools → Map Remote点击AddSource Host:api-prod.example.comSource Port:443Destination Host:localhostDestination Port:3000Protocol:HTTPS勾选Enable Map RemoteTools → Rewrite点击Add新建规则组命名为Finance API Rewrite添加规则If URL matches /v1/quote/fund.*→Then Set URL to http://localhost:3000/mock/quote/fund添加规则If URL matches /v1/quote/stock.*→Then Do nothing即放行勾选Enable Rewrite Rules。MSW规则增强仅重写URL不够金融接口常需动态响应。我们在mocks/handlers.ts里添加// 模拟基金净值查询支持按日期回溯 rest.get(/mock/quote/fund/:fundCode, (req, res, ctx) { const fundCode req.params.fundCode const date req.url.searchParams.get(date) || 2024-01-01 // 根据基金代码和日期返回不同净值 const navData { 000001: { 2024-01-01: 1.2345, 2024-01-02: 1.2367 }, 110011: { 2024-01-01: 0.9876, 2024-01-02: 0.9891 } } const nav navData[fundCode]?.[date] || 1.0 return res( ctx.status(200), ctx.json({ code: 0, data: { fundCode, nav, date, updateTime: new Date().toISOString() } }) ) })效果验证访问https://api-prod.example.com/v1/quote/fund/000001?date2024-01-01→ 返回Mock数据访问https://api-prod.example.com/v1/quote/stock/600519→ 返回真实行情在Charles的Structure标签页能看到api-prod.example.com节点下/v1/quote/fund请求显示绿色Mapped/v1/quote/stock显示灰色Bypassed。这套配置让开发、测试、预发环境共用同一套规则只需开关Charles的Map Remote即可切换彻底告别process.env.VUE_APP_API_BASE_URL的环境变量地狱。4.3 断点拦截全流程从发现Bug到修复验证的5分钟闭环以一个高频Bug为例“用户在交易时段内提交买入委托页面显示‘下单成功’但实际未成交后台无记录”。传统排查要等后端查日志至少半小时。用断点拦截5分钟闭环Step 1复现并定位请求打开Chrome DevTools → Network面板操作页面触发下单找到POST /api/order/submit请求右键 →Break on fetch/XHR刷新页面请求自动暂停在Request Headers断点Step 2检查请求完整性在Headers标签页确认Authorization值存在且格式为Bearer xxxContent-Type: application/jsonX-Trade-Session: 20240101001交易会话ID存在切换到Payload标签页确认Body为{symbol:600519,side:BUY,price:1900.00,volume:100,orderType:LIMIT}注意这里发现price是1900.00但当前股价是1899.50限价单合理。Step 3拦截响应并注入调试字段在Charles里对/api/order/submit设置Break on Response重新触发下单请求走到Response断点在Charles的Response标签页点击Edit Response→Body→JSON视图在data对象里添加__debug_info: { receivedAt: Date.now(), serverIP: 10.0.1.100 }点击Execute放行Step 4前端验证与日志输出在前端代码里fetch后添加.then(res res.json()) .then(data { console.log(Debug Info:, data.__debug_info) // 输出服务器IP和接收时间 if (data.code ! 0) { throw new Error(data.msg) } })刷新页面Console里看到Debug Info: {receivedAt: 1704067200000, serverIP: 10.0.1.100}证明请求确实到达了后端集群的10.0.1.100节点Step 5结论与协作既然请求已送达且返回成功问题不在网络层而在后端业务逻辑将serverIP和receivedAt时间戳提供给后端他们可在该节点日志里精确搜索同时我们用MSW规则模拟该节点故障rest.post(/api/order/submit, (req, res, ctx) { // 模拟节点10.0.1.100在特定时间返回空响应 if (req.url.searchParams.get(debug_ip) 10.0.1.100) { return res(ctx.status(200), ctx.json({ code: 0, data: {} })) // 空data触发前端异常 } })这样前端可立即复现问题无需等待后端修复。整个过程没有一次后端沟通前端自主定位到根因。这就是断点拦截赋予的生产力。5. 常见问题与排查技巧实录那些年踩过的坑和省下的时间5.1 “Mock数据不生效”问题速查表90%的问题在这里现象可能原因排查步骤解决方案经验备注Network面板显示(from service worker)但返回404MSW规则路径与请求URL不匹配大小写或斜杠不一致1. 查看Network面板请求URL如/api/user/profile2. 检查MSW规则rest.get(/api/user/profile, ...)是否完全一致3. 在MSW控制台查看[MSW] Warning: captured a request without a matching request handler确保规则路径与请求URL逐字符匹配开启onUnhandledRequest: warn获取详细日志我们团队约定所有API路径在Swagger里定义后直接复制到MSW规则避免手写错误Charles显示SSL handshake failed系统证书未正确安装或未设为“始终信任”1. 打开钥匙串访问 → 登录 → 证书类别 → 查找Charles Proxy CA2. 双击证书 → 信任 → “始终信任”3. 重启Charles重新安装证书务必在钥匙串里设置“始终信任”macOS Ventura后系统对证书要求更严必须手动设置不能只点“信任”Mock数据生效但页面报跨域错误前端代码里fetch使用了credentials: include但Mock Server未设置CORS1. 查看Network面板响应Headers确认是否有Access-Control-Allow-Origin: *2. 查看MSW文档确认是否配置了ctx.set(Access-Control-Allow-Origin, *)在MSW规则里添加ctx.set(Access-Control-Allow-Origin, *)和ctx.set(Access-Control-Allow-Credentials, true)MSW默认不加CORS头必须显式设置否则带Cookie的请求会失败规则改写后页面样式错乱或JS报错Charles重写了HTML/CSS/JS资源导致文件损坏1. 在Charles的Structure面板展开api-prod.example.com节点2. 查看是否有/static/js/app.js等非API请求被重写3. 在Map Remote设置里添加Exclude规则*.js, *.css, *.png, *.jpg在Map Remote设置里勾选Exclude添加常见静态资源后缀金融项目常有/static/chart.min.js等资源重写后JS语法错误页面白屏5.2 规则改写进阶避坑那些让你加班到凌晨的隐藏雷区雷区一Host重写与Cookie域冲突现象登录后Mock接口返回401。排查发现Set-Cookie的Domain是.example.com但Charles重写Host为localhost浏览器认为localhost不属于.example.com拒绝存储Cookie。解决方案在Charles的Rewrite规则里对Set-CookieHeader做二次处理添加规则If Header Name is Set-Cookie and Value contains Domain.example.com→Then Replace Value Domain.example.com with Domainlocalhost或更彻底在MSW规则里不依赖Cookie鉴权改用Authorization: Bearer xxx前端统一管理Token。雷区二WebSocket重写后连接失败现象wss://quote-prod.example.com/ws重写为ws://localhost:3000/ws后连接报错Error during WebSocket handshake: net::ERR_CONNECTION_REFUSED。原因WebSocket协议升级需要Upgrade: websocket和Connection: UpgradeHeaderCharles默认不转发这些Header。解决方案在Charles的Proxy → SSL Proxying Settings → Locations里添加wss://quote-prod.example.com并勾选Enable SSL Proxying同时在Rewrite规则里确保Upgrade和ConnectionHeader被透传。雷区三断点拦截导致页面卡死现象设置Break on Response后页面长时间白屏Console无报错。原因某些金融接口返回超大JSON如全市场行情快照2MBCharles断点时加载整个Body到内存浏览器卡死。解决方案在Charles的Proxy → Recording Settings里勾选Limit recording to设置1024 KB超过大小的响应自动截断或改用Break on Headers只检查状态码和Headers不加载Body。5.3 断点拦截独家技巧提升10倍效率的冷知识技巧一用console.table()可视化请求参数在Chrome DevTools Console里粘贴以下代码可一键打印当前所有XHR请求的URL、Method、Headers// 获取所有已发送的XHR请求需在Network面板开启录制 const requests performance.getEntriesByType(resource).filter(e e.name.includes(api/)); console.table(requests.map(r ({ url: r.name, method: r.initiatorType, size: r.encodedBodySize, duration: r.duration.toFixed(2) })));这比手动翻Network面板快10倍特别适合排查“哪个接口拖慢了首屏”。技巧二Charles断点自动注入调试Header在Charles的Tools → Breakpoints
1. 这不是“造数据”而是前端联调的呼吸节奏控制术Mock 接口数据实操规则改写和断点拦截的联调——这标题里藏着三个被日常开发严重低估的关键动作数据可控性、请求可塑性、交互可暂停性。它不是教你怎么用一个工具生成假JSON而是解决一个真实到让人皱眉的现场问题后端接口还没上线UI已交付测试用例要跑通产品经理在群里你问“页面空白是不是你代码没写好”而你心里清楚是那个叫/api/v2/user/portfolio/summary的接口还在联调环境里打盹。这时候Mock 不是备胎是主驾规则改写不是配置项是翻译器断点拦截不是调试开关是时间暂停键。我带过六支前端团队90% 的联调阻塞不是出在代码逻辑而是卡在“等接口”这个单点上。真正高效的 Mock 实践必须同时满足三个硬指标第一前端能独立构造任意结构、任意状态码、任意延迟的响应比如模拟网络超时返回504或模拟登录态失效返回401第二能对真实发出的请求做动态重写——把/dev-api/user临时映射成/mock/user甚至把请求体里的userId123替换成userId999用于边界测试第三能在请求发出前、响应返回后、甚至响应流中间任意位置插入断点像外科医生一样精准切开HTTP生命周期查看原始请求头、修改响应体字段、注入错误信息再放行。这三个能力叠加才构成完整的“联调呼吸控制”。它不依赖后端进度不污染生产环境更不靠“我本地能跑”这种模糊承诺。尤其在金融、电商这类强状态、多分支场景下mock 数据必须能表达“持仓为0但有挂单”、“订单已支付但风控未通过”、“行情推送中断后重连成功”等复合状态——这些根本不是随机生成的JSON能覆盖的。所以别再搜“charles mock数据教程”只学怎么配host了今天这篇我们从真实项目日志出发拆解一套可落地、可审计、可交接的 Mock 联调工作流。2. 整体设计思路为什么必须三线并行而不是单点突破2.1 单一Mock工具的致命盲区它只管“输出”不管“输入”和“过程”很多团队起步就选 Mock Server 类工具如 Mockoon、WireMock理由很实在界面友好、启动快、JSON写得顺。但三个月后必然遇到三类典型卡点第一前端发的是https://prod-api.example.com/user/profileMock Server监听的是http://localhost:3000/mock/user/profile你得全局替换所有fetch调用里的URL或者让Webpack DevServer做代理重写——一旦代理规则写错整个页面白屏排查成本远高于写Mock本身第二想测试“用户余额不足时提交订单失败”的场景需要后端返回特定错误码错误文案但Mock Server只能静态返回预设JSON无法根据请求体里的amount99999动态判断是否触发余额校验逻辑第三最要命的是当发现某个接口返回的数据格式和文档不符时你根本看不到原始请求到底发了什么——Header里少传了X-Auth-TokenQuery参数拼错了Body里日期格式是2024-01-01还是2024/01/01Mock Server作为服务端天然收不到请求发起前的状态。这就导致一个问题Mock解决了“有没有数据”却放大了“数据对不对”的不确定性。我去年接手一个股票行情项目前端反复报“K线图不渲染”查了两天才发现是WebSocket连接时前端漏传了marketSH这个Query参数而Mock Server压根不记录请求元信息所有排查都靠猜。2.2 三线并行架构让Mock成为可观察、可干预、可验证的透明管道我们最终落地的方案是把Mock能力拆解为三个协同层每层解决一类问题且全部运行在开发者本地第一层请求拦截与重写层Charles/Fiddler/浏览器DevTools Network面板它位于浏览器和真实服务器之间像交通指挥中心能看见每一辆“请求车”的车牌URL、载货清单Headers/Body、目的地Host。核心价值是零代码侵入式重定向不用改一行业务代码就能把所有/api/开头的请求实时重写为/mock/路径还能动态修改请求参数比如把?page1size10改成?page1size1强制触发分页异常甚至能注入自定义Header模拟不同登录态。这一层解决的是“请求能不能被正确捕获和改造”。第二层规则驱动Mock层基于MSW或自研轻量Mock引擎它不直接监听端口而是作为前端代码的一部分在浏览器内存中运行。通过声明式规则如rest.get(/api/user/:id, (req, res, ctx) {...})匹配请求并返回动态响应。关键优势在于上下文感知能读取req.url.searchParams.get(id)能解析req.body能根据当前时间计算Date.now() deadline返回不同状态。我们曾用它模拟“交易时段内允许下单非交易时段返回维护中”的逻辑纯靠JSON配置根本做不到。这一层解决的是“响应能不能按需生成”。第三层断点调试层浏览器DevTools的XHR Breakpoints 自定义拦截钩子它不是附加功能而是贯穿前两层的“手术刀”。在Chrome DevTools里设置XHR/fetch断点请求发出瞬间自动暂停你能看到完整的Request Headers、Payload、Response Headers甚至能手动编辑响应体再继续执行。更进一步我们在MSW规则里嵌入debugger语句或在Charles里配置“Break on Response”实现毫秒级介入。这一层解决的是“整个链路能不能被完整观测和干预”。这三层不是替代关系而是流水线请求先被拦截层捕获并重写 → 重写后的请求进入规则层匹配并生成响应 → 响应返回前由断点层捕获供人工检查。三者缺一不可。比如测试“弱网环境下订单提交超时”你需要拦截层将/api/order/submit重写为本地Mock地址规则层设置ctx.delay(8000)模拟8秒延迟断点层在响应返回前暂停手动修改状态码为0模拟网络中断。单点工具永远无法覆盖这种组合场景。2.3 为什么放弃“一站式”方案安全、可控、可审计是底线市面上确实有“All-in-One”工具比如Postman Mock Server配合Proxy或某些IDE插件。但我们明确拒绝原因有三第一安全边界模糊。这类工具常要求你配置“信任所有HTTPS证书”或“允许本地代理”一旦配置失误真实生产请求可能被劫持。我们曾发现某团队用某款国产Mock工具因SSL配置错误导致测试环境的/api/login请求被重定向到本地用户密码明文暴露在控制台日志里。第二行为不可审计。当出现“Mock数据突然不生效”时你无法快速定位是规则没匹配、拦截没生效还是断点被误关。而分层架构下每层都有独立日志Charles显示“Request intercepted for /api/user”MSW控制台打印“[MSW] GET /mock/user matched”DevTools Network面板标记“Paused on fetch”。三份日志交叉验证5分钟内必定位。第三技术栈绑定风险。所谓“Vue3 TS的mock使用教程”本质是教你怎么在Vite配置里加server.proxy。但当项目后期接入微前端主应用用React、子应用用Vue代理规则会变成维护噩梦。而我们的分层方案拦截层在浏览器端规则层在各子应用独立配置完全解耦。所以这不是炫技而是用稍高的初期学习成本换取后期90%的联调时间节省。当你能对着产品经理说“这个需求我明天就能给你可交互Demo不需要等后端”你就掌握了前端真正的主动权。3. 核心细节解析规则改写与断点拦截的实操铁律3.1 规则改写的三大禁区URL重写、Header篡改、Body注入的生死线规则改写不是简单的字符串替换而是HTTP协议层面的精密手术。我见过太多人栽在看似微小的细节上导致Mock环境和真实环境行为不一致最终上线翻车。第一禁区URL重写必须保留原始协议与Host头常见错误操作在Charles里把https://prod-api.example.com/api/user重写为http://localhost:3000/mock/user。表面看能拿到数据但埋下两个雷雷一前端代码里如果有window.location.origin拼接API地址的逻辑比如上传文件时用origin /upload重写后origin仍是https://prod-api.example.com但请求发到了http://localhost跨域报错雷二某些金融接口强制校验Referer或OriginHeader重写URL后这些Header没变但服务端一看“你从生产域名来却访问本地Mock”直接拒绝。正确做法使用Charles的“Map Remote”功能将prod-api.example.com这个Host映射到localhost:3000同时保持URL路径和协议不变。这样浏览器发出的仍是https://prod-api.example.com/api/userCharles在DNS层将其指向本地服务端收到的Host头、Referer头、Origin头全部真实只是流量被本地截获。实测下来这是唯一能100%模拟真实网络环境的方案。第二禁区Header篡改必须区分“可信Header”与“敏感Header”哪些Header绝对不能动Cookie、Authorization、X-Requested-With。动了Cookie登录态丢失动了AuthorizationJWT校验失败动了X-Requested-With后端可能拒绝非AJAX请求。但有些Header必须改比如金融接口要求X-App-Version: 3.2.1而你本地版本是3.3.0不改就会被限流。安全改法在Charles的“Rewrite”规则里只针对特定URL路径启用Header修改。例如仅对/api/trade/开头的请求添加X-App-Version: 3.2.1其他请求保持原样。同时所有Header修改操作必须记录在团队Wiki里标注“此Header为模拟旧版本客户端所必需上线前必须删除”。我们曾因忘记删这条规则导致灰度发布时部分用户被识别为旧版触发了错误的降级策略。第三禁区Body注入必须严格遵循Content-Type语义很多人直接在Charles里编辑Request Body把{amount:100}改成{amount:99999}结果接口返回400。原因很简单如果原始请求Header是Content-Type: application/json你改Body没问题但如果Header是Content-Type: application/x-www-form-urlencoded你却用JSON格式编辑后端解析必然失败。铁律操作在Charles的“Breakpoint”模式下右键点击请求 → “Edit Request” → 切换到“Headers”标签页确认Content-Type值再切换到“Body”标签页根据类型选择编辑方式JSON用“JSON”视图Form用“Form”视图Raw用“Raw”视图。我们团队强制规定所有Body修改必须截图存档包含Headers截图和Body编辑界面截图作为联调报告附件。这看似繁琐但避免了“明明改了数据却说没生效”的扯皮。3.2 断点拦截的黄金四象限何时该断、断在哪、断后做什么、断后如何放行断点不是越多越好而是要精准打击关键决策点。我们总结出HTTP生命周期的四个黄金断点位置每个位置对应不同的调试目标断点位置触发时机典型调试目标操作建议风险提示Request Headers请求发出前Headers已组装完成检查认证Token是否有效、Host是否正确、自定义Header是否缺失查看Authorization值是否为JWT且未过期核对Host是否为预期域名确认X-Trace-ID是否生成不要在此处修改Headers后直接放行可能破坏签名逻辑Request Body请求发出前Body已序列化验证提交数据格式、边界值、敏感字段脱敏检查amount是否为数字而非字符串确认phone字段是否已脱敏为138****1234验证file字段是否为Blob对象修改Body后务必重新计算Content-Length否则后端接收不全Response Headers响应返回后Headers已接收分析缓存策略、重定向跳转、错误码含义查看Cache-Control是否为no-cache确认Location头是否指向正确URL解读X-RateLimit-Remaining剩余调用次数此处修改Headers可能导致前端缓存异常仅用于临时测试Response Body响应返回后Body已接收但未解析修复数据格式、注入测试字段、模拟异常结构将{code:0,data:{}}改为{code:500,msg:mock error}在data里添加__mock_timestamp: Date.now()便于追踪把空数组[]改为[{id:1,name:test}]修改Body后需确保JSON语法正确否则前端JSON.parse()报错实操心得不要依赖“自动断点”。比如想测试“接口超时”很多人在Response Body断点然后手动延迟。这是错的——超时发生在TCP连接建立或响应头接收阶段Body断点时连接早已建立。正确做法是在Charles里配置“Throttle”限速将网络设为“GPRS”此时请求自然超时你能在Network面板看到Failed to load response data这才是真实超时场景。同样“401未授权”测试应该在Request Headers断点删除Authorization头后放行而不是在Response Body里伪造401响应——前者能触发前端真实的登录态失效流程后者只是个静态错误页。3.3 Mock规则编写的反直觉原则状态驱动优于数据驱动副作用最小化新手写Mock规则本能是“我要返回什么数据”比如return { code: 0, data: { balance: 10000 } }。这会导致两个问题一是规则和业务逻辑耦合二是无法模拟真实服务的副作用如扣款后余额变更、下单后库存减少。我们推行“状态驱动”规则即规则描述的是系统当前状态而非静态数据。案例股票委托单状态机模拟真实场景中委托单有“已报”、“部成”、“已成”、“已撤”、“废单”五种状态且状态流转受时间、价格、市场状态影响。如果写五个静态JSON测试覆盖率极低。我们用MSW编写如下规则// 模拟委托单查询接口 rest.get(/api/order/:orderId, (req, res, ctx) { const orderId req.params.orderId; // 从内存状态机获取当前订单状态 const orderState getOrderState(orderId); // 状态机函数根据orderId返回状态 // 根据状态返回不同结构 switch(orderState) { case SUBMITTED: return res( ctx.status(200), ctx.json({ code: 0, data: { orderId, status: SUBMITTED, submitTime: Date.now() - 60000, // 1分钟前提交 price: 10.5, volume: 1000 } }) ); case PARTIAL_FILLED: return res( ctx.status(200), ctx.json({ code: 0, data: { orderId, status: PARTIAL_FILLED, submitTime: Date.now() - 120000, fillTime: Date.now() - 30000, // 30秒前部分成交 price: 10.5, volume: 1000, filledVolume: 300, // 已成交300股 avgFillPrice: 10.48 } }) ); // ... 其他状态 } });关键点getOrderState()是一个可配置的内存状态机我们提供CLI命令mock-state set-order-status 12345 PARTIAL_FILLED测试时一键切换状态无需重启服务。这比写十个JSON文件高效十倍。副作用最小化原则Mock规则里禁止任何外部I/O操作。曾有同事在规则里调用fs.readFileSync(./config.json)读取配置导致每次请求都触发磁盘IO页面加载慢3秒。正确做法是启动时一次性读取配置到内存规则里只做纯函数计算。我们约定所有Mock规则函数必须是无副作用、确定性、可缓存的。这意味着同一个请求参数永远返回相同响应除非你主动修改状态机。4. 实操过程从零搭建可交付的Mock联调环境4.1 环境准备三件套安装与基础配置10分钟搞定第一步Charles安装与HTTPS抓包配置下载Charles Proxy官网正版避免破解版证书风险安装后打开。关键配置有三处SSL Proxying菜单栏Proxy → SSL Proxying Settings勾选Enable SSL Proxying在Locations里添加*通配所有域名。这是为了抓取HTTPS请求但必须配合下一步证书安装Install Charles Root Certificate菜单栏Help → SSL Proxying → Install Charles Root Certificate按向导安装到系统钥匙串并在钥匙串里双击证书 → “信任” → “始终信任”。这一步漏掉所有HTTPS请求会显示SSL handshake failedLocal Proxy Port菜单栏Proxy → Proxy Settings确认端口为8888默认这是后续所有工具对接的端口。提示如果公司电脑管理员禁用了证书安装可用浏览器DevTools的Network面板替代Charles但会失去Host重写能力。此时必须用Webpack DevServer代理配置proxy: { /api: { target: http://localhost:3000, changeOrigin: true } }代价是每次改代理都要重启服务。第二步MSW初始化与Vite集成我们以Vite Vue3 TypeScript项目为例其他框架同理# 1. 安装MSW npm install -D msw # 2. 创建mocks/handlers.ts定义基础规则 import { rest } from msw export const handlers [ rest.get(/api/user/profile, (req, res, ctx) { return res(ctx.status(200), ctx.json({ code: 0, data: { name: Mock User, balance: 10000 } })) }), ]// 3. 创建mocks/browser.ts浏览器端启动入口 import { setupWorker } from msw import { handlers } from ./handlers export const worker setupWorker(...handlers)// 4. 在src/main.ts最顶部引入必须在app.mount前 import { worker } from ./mocks/browser if (process.env.NODE_ENV development) { worker.start({ onUnhandledRequest: bypass // 未匹配规则的请求放行给真实服务器 }) }关键验证启动Vite服务后打开浏览器DevTools → Application → Service Workers能看到MSW注册成功Network面板里所有/api/请求的Size列会显示(from service worker)证明MSW已接管。第三步VS Code调试配置可选但强烈推荐在项目根目录创建.vscode/launch.json{ version: 0.2.0, configurations: [ { type: pwa-chrome, request: launch, name: Launch Chrome with Mock, url: http://localhost:5173, webRoot: ${workspaceFolder}, sourceMaps: true, trace: true, runtimeArgs: [ --remote-debugging-port9222, --proxy-serverlocalhost:8888, // 关键让Chrome走Charles代理 --proxy-bypass-list-loopback ] } ] }这样F5启动后Chrome自动走Charles代理无需手动设置浏览器代理。我们团队所有成员都用此配置统一环境。4.2 规则改写实战金融行情接口的动态重写链以一个真实金融项目为例生产环境行情接口为wss://quote-prod.example.com/wsWebSocketREST接口为https://api-prod.example.com/v1/quote。前端代码里硬编码了api-prod.example.com但我们希望开发时所有api-prod.example.com请求重写为本地Mock测试时部分请求如/v1/quote/stock仍走真实环境只Mock/v1/quote/fund上线前一键关闭所有Mock回归真实环境。Charles配置步骤Proxy → Recording Settings勾选Record HTTP Headers和Record HTTPS Headers确保能查看完整请求Tools → Map Remote点击AddSource Host:api-prod.example.comSource Port:443Destination Host:localhostDestination Port:3000Protocol:HTTPS勾选Enable Map RemoteTools → Rewrite点击Add新建规则组命名为Finance API Rewrite添加规则If URL matches /v1/quote/fund.*→Then Set URL to http://localhost:3000/mock/quote/fund添加规则If URL matches /v1/quote/stock.*→Then Do nothing即放行勾选Enable Rewrite Rules。MSW规则增强仅重写URL不够金融接口常需动态响应。我们在mocks/handlers.ts里添加// 模拟基金净值查询支持按日期回溯 rest.get(/mock/quote/fund/:fundCode, (req, res, ctx) { const fundCode req.params.fundCode const date req.url.searchParams.get(date) || 2024-01-01 // 根据基金代码和日期返回不同净值 const navData { 000001: { 2024-01-01: 1.2345, 2024-01-02: 1.2367 }, 110011: { 2024-01-01: 0.9876, 2024-01-02: 0.9891 } } const nav navData[fundCode]?.[date] || 1.0 return res( ctx.status(200), ctx.json({ code: 0, data: { fundCode, nav, date, updateTime: new Date().toISOString() } }) ) })效果验证访问https://api-prod.example.com/v1/quote/fund/000001?date2024-01-01→ 返回Mock数据访问https://api-prod.example.com/v1/quote/stock/600519→ 返回真实行情在Charles的Structure标签页能看到api-prod.example.com节点下/v1/quote/fund请求显示绿色Mapped/v1/quote/stock显示灰色Bypassed。这套配置让开发、测试、预发环境共用同一套规则只需开关Charles的Map Remote即可切换彻底告别process.env.VUE_APP_API_BASE_URL的环境变量地狱。4.3 断点拦截全流程从发现Bug到修复验证的5分钟闭环以一个高频Bug为例“用户在交易时段内提交买入委托页面显示‘下单成功’但实际未成交后台无记录”。传统排查要等后端查日志至少半小时。用断点拦截5分钟闭环Step 1复现并定位请求打开Chrome DevTools → Network面板操作页面触发下单找到POST /api/order/submit请求右键 →Break on fetch/XHR刷新页面请求自动暂停在Request Headers断点Step 2检查请求完整性在Headers标签页确认Authorization值存在且格式为Bearer xxxContent-Type: application/jsonX-Trade-Session: 20240101001交易会话ID存在切换到Payload标签页确认Body为{symbol:600519,side:BUY,price:1900.00,volume:100,orderType:LIMIT}注意这里发现price是1900.00但当前股价是1899.50限价单合理。Step 3拦截响应并注入调试字段在Charles里对/api/order/submit设置Break on Response重新触发下单请求走到Response断点在Charles的Response标签页点击Edit Response→Body→JSON视图在data对象里添加__debug_info: { receivedAt: Date.now(), serverIP: 10.0.1.100 }点击Execute放行Step 4前端验证与日志输出在前端代码里fetch后添加.then(res res.json()) .then(data { console.log(Debug Info:, data.__debug_info) // 输出服务器IP和接收时间 if (data.code ! 0) { throw new Error(data.msg) } })刷新页面Console里看到Debug Info: {receivedAt: 1704067200000, serverIP: 10.0.1.100}证明请求确实到达了后端集群的10.0.1.100节点Step 5结论与协作既然请求已送达且返回成功问题不在网络层而在后端业务逻辑将serverIP和receivedAt时间戳提供给后端他们可在该节点日志里精确搜索同时我们用MSW规则模拟该节点故障rest.post(/api/order/submit, (req, res, ctx) { // 模拟节点10.0.1.100在特定时间返回空响应 if (req.url.searchParams.get(debug_ip) 10.0.1.100) { return res(ctx.status(200), ctx.json({ code: 0, data: {} })) // 空data触发前端异常 } })这样前端可立即复现问题无需等待后端修复。整个过程没有一次后端沟通前端自主定位到根因。这就是断点拦截赋予的生产力。5. 常见问题与排查技巧实录那些年踩过的坑和省下的时间5.1 “Mock数据不生效”问题速查表90%的问题在这里现象可能原因排查步骤解决方案经验备注Network面板显示(from service worker)但返回404MSW规则路径与请求URL不匹配大小写或斜杠不一致1. 查看Network面板请求URL如/api/user/profile2. 检查MSW规则rest.get(/api/user/profile, ...)是否完全一致3. 在MSW控制台查看[MSW] Warning: captured a request without a matching request handler确保规则路径与请求URL逐字符匹配开启onUnhandledRequest: warn获取详细日志我们团队约定所有API路径在Swagger里定义后直接复制到MSW规则避免手写错误Charles显示SSL handshake failed系统证书未正确安装或未设为“始终信任”1. 打开钥匙串访问 → 登录 → 证书类别 → 查找Charles Proxy CA2. 双击证书 → 信任 → “始终信任”3. 重启Charles重新安装证书务必在钥匙串里设置“始终信任”macOS Ventura后系统对证书要求更严必须手动设置不能只点“信任”Mock数据生效但页面报跨域错误前端代码里fetch使用了credentials: include但Mock Server未设置CORS1. 查看Network面板响应Headers确认是否有Access-Control-Allow-Origin: *2. 查看MSW文档确认是否配置了ctx.set(Access-Control-Allow-Origin, *)在MSW规则里添加ctx.set(Access-Control-Allow-Origin, *)和ctx.set(Access-Control-Allow-Credentials, true)MSW默认不加CORS头必须显式设置否则带Cookie的请求会失败规则改写后页面样式错乱或JS报错Charles重写了HTML/CSS/JS资源导致文件损坏1. 在Charles的Structure面板展开api-prod.example.com节点2. 查看是否有/static/js/app.js等非API请求被重写3. 在Map Remote设置里添加Exclude规则*.js, *.css, *.png, *.jpg在Map Remote设置里勾选Exclude添加常见静态资源后缀金融项目常有/static/chart.min.js等资源重写后JS语法错误页面白屏5.2 规则改写进阶避坑那些让你加班到凌晨的隐藏雷区雷区一Host重写与Cookie域冲突现象登录后Mock接口返回401。排查发现Set-Cookie的Domain是.example.com但Charles重写Host为localhost浏览器认为localhost不属于.example.com拒绝存储Cookie。解决方案在Charles的Rewrite规则里对Set-CookieHeader做二次处理添加规则If Header Name is Set-Cookie and Value contains Domain.example.com→Then Replace Value Domain.example.com with Domainlocalhost或更彻底在MSW规则里不依赖Cookie鉴权改用Authorization: Bearer xxx前端统一管理Token。雷区二WebSocket重写后连接失败现象wss://quote-prod.example.com/ws重写为ws://localhost:3000/ws后连接报错Error during WebSocket handshake: net::ERR_CONNECTION_REFUSED。原因WebSocket协议升级需要Upgrade: websocket和Connection: UpgradeHeaderCharles默认不转发这些Header。解决方案在Charles的Proxy → SSL Proxying Settings → Locations里添加wss://quote-prod.example.com并勾选Enable SSL Proxying同时在Rewrite规则里确保Upgrade和ConnectionHeader被透传。雷区三断点拦截导致页面卡死现象设置Break on Response后页面长时间白屏Console无报错。原因某些金融接口返回超大JSON如全市场行情快照2MBCharles断点时加载整个Body到内存浏览器卡死。解决方案在Charles的Proxy → Recording Settings里勾选Limit recording to设置1024 KB超过大小的响应自动截断或改用Break on Headers只检查状态码和Headers不加载Body。5.3 断点拦截独家技巧提升10倍效率的冷知识技巧一用console.table()可视化请求参数在Chrome DevTools Console里粘贴以下代码可一键打印当前所有XHR请求的URL、Method、Headers// 获取所有已发送的XHR请求需在Network面板开启录制 const requests performance.getEntriesByType(resource).filter(e e.name.includes(api/)); console.table(requests.map(r ({ url: r.name, method: r.initiatorType, size: r.encodedBodySize, duration: r.duration.toFixed(2) })));这比手动翻Network面板快10倍特别适合排查“哪个接口拖慢了首屏”。技巧二Charles断点自动注入调试Header在Charles的Tools → Breakpoints
