[{"data":1,"prerenderedAt":107},["ShallowReactive",2],{"case-precise-mock-from-one-request-zh":3,"blog-list-zh":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"precise-mock-from-one-request","断点总误伤一片？从一条真实请求勾出精确 Mock","主流抓包工具的断点是手写的 URL 规则，一开就连轮询和埋点一起停住。本文用 DevPeek 的 Mock 向导，从一条真实请求勾出匹配条件，并演示篡改版本与场景组怎么切换边界。","2026-09-24",false,"DevPeek Mock 教程：从抓到的请求勾选 URL、Query、Body 与请求头作为断点条件；加密参数先解密再按明文命中。同一条规则可一键切换篡改版本，多条规则可收成场景整组启停。","api-debug-new-tricks",5,"\u003Cp>联调时最常见的断点用法，是在 Charles、Fiddler 或 Whistle 里写一条 Host / Path 规则，然后打开断点。\u003C/p>\n\u003Cp>规则一开，订单详情、列表轮询、埋点、重试会一起停住。你改第一条的时候，后面几条已经超时，页面也卡住了。条件要写细，还得自己填 Host、Path、Query。接口如果加密，表单里看到的是密文，不知道该匹配哪一段。\u003C/p>\n\u003Cp>DevPeek 把这件事收成向导：对抓到的那条请求右键「Mock」，勾已经拆开的字段，保存成一条规则。本文按这个路径走一遍：精确命中、换返回、把一组边界收成场景。\u003C/p>\n\u003Ch2>适用读者\u003C/h2>\n\u003Cul>\n\u003Cli>用过抓包代理的断点，被「一开就停下一片」耽误过\u003C/li>\n\u003Cli>已能在 DevPeek 里看到 HTTPS 明文；还没抓到包的话，先看 \u003Ca href=\"/blog/install-first-capture/\">零基础上手：安装 DevPeek 并抓到第一个包\u003C/a>\u003C/li>\n\u003Cli>接口参数加密的，建议先读 \u003Ca href=\"/blog/api-param-encryption-debug/\">H5 接口参数加密？DevPeek 一键解密调试\u003C/a>，配好 \u003Ca href=\"/docs/param-transform/\">参数转换\u003C/a> 再做下面的明文勾选\u003C/li>\n\u003C/ul>\n\u003Ch2>容易卡住的地方\u003C/h2>\n\u003Cul>\n\u003Cli>断点打在 Host 或 Path 前缀上，同域的轮询和静态请求都会进暂停队列。\u003C/li>\n\u003Cli>匹配值手写，和线上多一个空格、少一个字段就永不命中。\u003C/li>\n\u003Cli>加密 Body 整段当条件，换一个订单号就失效；按明文里的 \u003Ccode>orderId\u003C/code> 勾，才能只断这一单。\u003C/li>\n\u003Cli>规则保存后会一直生效。勾得很细，也只是「这类请求」都停，不是「只停下一次」。测完把规则或场景关掉。\u003C/li>\n\u003C/ul>\n\u003Ch2>步骤一：先抓到要断的那条\u003C/h2>\n\u003Cp>把客户端代理到 DevPeek，打开要测的页面，在 \u003Ca href=\"/docs/capture/\">抓包列表\u003C/a> 里点开目标请求，确认 Method、Path、Query 和 Body 就是这次操作发出的那份。\u003C/p>\n\u003Cp>列表里若是密文，先确认参数转换已命中，详情里能看到解密后的明文。向导里的勾选用的就是这份明文。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 列表里能点开一条完整的目标请求；加密接口在详情中能看到可读字段。\u003C/p>\n\u003Ch2>步骤二：向导里勾匹配条件\u003C/h2>\n\u003Cp>在这条请求上右键「Mock」。第一步标题是「拾取条件」。\u003C/p>\n\u003Cp>界面把这次请求拆成 Method、Host、Path、Query、Body、请求头。要多细就勾多细，值来自这条请求，不用手写规则。加密字段会先解密：JSON 可以展开，勾到 \u003Ccode>orderId\u003C/code> 这种子字段，密文本身不用当条件。\u003C/p>\n\u003Cp>常见勾法：\u003C/p>\n\u003Cul>\n\u003Cli>只想挡住这一个接口：Method + Path。\u003C/li>\n\u003Cli>同一接口要按订单区分：再勾 Query 或 Body 里的那一个字段。\u003C/li>\n\u003Cli>要排除别的客户端：再勾一个能区分环境的请求头。\u003C/li>\n\u003C/ul>\n\u003Cp>勾得越少，后面误伤越多。同一 Path 的轮询如果 Body 不同，就把那个不同字段勾上。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 预览里能看到你勾中的字段和取值，且没有把整站 Host 当成唯一条件。\u003C/p>\n\u003Ch2>步骤三：选手动暂停，还是自动返回\u003C/h2>\n\u003Cp>第二步是「编辑返回」，二选一。\u003C/p>\n\u003Cp>\u003Cstrong>手动 Mock\u003C/strong> 勾请求、响应，或两段都要。之后命中这条规则的请求会暂停，弹出篡改窗口；改完点「继续」或「中止」。适合临时改一个字段看页面反应。\u003C/p>\n\u003Cp>\u003Cstrong>自动 Mock\u003C/strong> 只选请求或响应其中一段，并写好当前版本的篡改内容。命中后按这份内容放行。只 Mock 响应时，可以直接返回你写的状态码和 Body，不必打到真实服务器。适合固定的 404、空列表、错误 JSON。\u003C/p>\n\u003Cp>手动 Mock 的改包发生在命中之后；自动 Mock 的返回要在这一步写好。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 保存成功。再触发一次相同操作，手动规则会弹出篡改窗口，自动规则会按你写的内容返回。\u003C/p>\n\u003Ch2>步骤四：同一条规则存几套返回\u003C/h2>\n\u003Cp>一条规则可以有多份篡改版本，例如「正常」「空列表」「500」。同一时刻只有标成生效的那一版参与 Mock，其余只是备着。\u003C/p>\n\u003Cp>右侧 Mock 面板里展开这条规则，点另一版即可切换，不用另写一条规则，也不用重填匹配条件。它不会按第几次请求自己轮换，要换边界就点那一版。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 同一条规则下至少两版；切换生效版本后，下一次命中的返回跟着变。\u003C/p>\n\u003Ch2>步骤五：把相关规则收成一个场景\u003C/h2>\n\u003Cp>一个边界往往牵着好几条接口。比如「库存不足」要同时改创建订单和支付状态，就做成两条规则，放进同一个场景。\u003C/p>\n\u003Cp>场景是分组，用来整组启停。场景开关是总闸，不改每条规则自己的勾选；条目仍要单独勾上才会生效。多个场景可以同时开着。\u003C/p>\n\u003Cp>匹配不看场景在树上的上下位置。已启用的规则按配置列表从末尾往前找，后写的优先，命中第一条就停。两条规则都可能套住同一次请求时，把更具体的那条留在后面。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 场景总闸打开时，组内已勾选的规则会命中；关掉总闸后，这组不再拦截，单条规则的勾选还在。\u003C/p>\n\u003Ch2>测完记得关掉\u003C/h2>\n\u003Cp>规则和场景会一直留在配置里。精确勾选减少的是「不像的请求被停住」；长得一样的后续请求，包括轮询和重试，仍会再命中。\u003C/p>\n\u003Cp>看完这次结果，关掉这条规则或整个场景，再刷新页面，确认请求已经回到源站。\u003C/p>\n\u003Ch2>下一步\u003C/h2>\n\u003Cp>匹配条件、手动 / 自动 Mock、篡改版本的字段说明见 \u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a>。加密接口要先能在详情里看到明文，配置见 \u003Ca href=\"/docs/param-transform/\">参数转换\u003C/a>。\u003C/p>\n\u003Ch2>下一篇\u003C/h2>\n\u003Cp>这是「接口调试新姿势」系列当前最后一篇。你可以继续查看 \u003Ca href=\"/blog/\">博客列表\u003C/a>，或回到 \u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a> 对照向导里的每一项。\u003C/p>\n\u003Chr>\n\u003Cp>如果你也在断点里一遍遍手写 URL，欢迎 \u003Ca href=\"/\">下载 DevPeek\u003C/a> 对一条真实请求走一遍向导；规则怎么配见 \u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a>。遇到对不上的加密字段，可以到 \u003Ca href=\"https://github.com/GYPengDev/devpeek/discussions\">GitHub Discussions\u003C/a> 贴一条脱敏请求。\u003C/p>\n\u003Ch2>相关文档\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/param-transform/\">参数转换\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/capture/\">抓包界面与请求详情\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/quick-start/\">快速上手\u003C/a>\u003C/li>\n\u003C/ul>\n",{"items":14},[15,16,23,29,35,42,48,54,61,68,74,80,88,94,101],{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":17,"title":18,"summary":19,"date":20,"featured":8,"seoDescription":21,"series":22,"seriesOrder":11},"dev-build-log-android-apk","测试机借来借去，我们不想再改系统代理","测试机在团队里转一次，Wi-Fi 代理就要跟着改一次。普通 App 写不了系统代理，于是我们做了 Android 配套 App，用 VpnService 把「换 IP、换端口」收成扫码切换。","2026-09-14","DevPeek 开发实录：为什么做 Android 配套 App。测试机在团队里流转时不再反复修改 Wi-Fi 代理，而是通过 VpnService 扫码切换当前抓包电脑。","dev-build-log",{"slug":24,"title":25,"summary":26,"date":20,"featured":8,"seoDescription":27,"series":22,"seriesOrder":28},"dev-build-log-android-file-transfer-assistant","测试机连上以后，我们又做了个文件互传助手","团队测试机通常没有聊天软件，也不会登录个人账号，传一个 URL、截图或安装包都很麻烦。Android 配套 App 做完后，我们顺手在已有配对链路旁加了一条局域网互传通道。","DevPeek 开发实录：团队测试机没有聊天软件时，如何通过 Android 配套 App 的独立 WebSocket 与 HTTP 局域网通道，在手机和电脑之间互传文字、图片、视频和文件。",6,{"slug":30,"title":31,"summary":32,"date":20,"featured":8,"seoDescription":33,"series":10,"seriesOrder":34},"https-origin-cert-mismatch","源站证书与域名不匹配？DevPeek 为什么仍能正常抓包","DevPeek 检测到源站证书与 Host 不匹配时，不会静默忽略，也不会直接中断调试；网站和 HTTPS 明文仍可查看，同时会在请求详情中标记证书异常。","遇到 ERR_TLS_CERT_ALTNAME_INVALID 时，DevPeek 为什么仍能打开网站并查看 HTTPS 明文？本文说明源站证书、Host 与 SAN 的关系，以及 DevPeek 如何继续解密并明确报告证书风险。",4,{"slug":36,"title":37,"summary":38,"date":39,"featured":8,"seoDescription":40,"series":10,"seriesOrder":41},"https-ssl-skip-decrypt","开了 SSL 抓包，有些网站反而打不开？把域名加进「跳过 SSL 代理」","系统代理和证书都已配置好，但个别网站或 App 一做 HTTPS 解密就无法访问。把对应 Host 加入「跳过 SSL 代理」，只让这部分流量走 CONNECT 隧道，不必关闭全部 HTTPS 抓包。","2026-09-01","DevPeek 开启 SSL 代理后个别网站或 App 无法访问？如果关闭解密或改走 CONNECT 隧道后恢复，可用 Include / Exclude 只跳过不兼容的 Host，保留其它 HTTPS 明文抓包。",3,{"slug":43,"title":44,"summary":45,"date":46,"featured":8,"seoDescription":47,"series":22,"seriesOrder":34},"dev-build-log-silent-auto-update","换掉 Electron 后，自动更新也得重做","DevPeek 换成 Tauri 后，更新的不只是一个窗口，而是 Launcher、Core 和 Shell 三个进程。我们把检查和下载挪到后台，等安装包准备好后，再由托盘完成最后一次重启。","2026-08-28","DevPeek 开发实录：桌面端从 Electron 换到 Tauri 后，如何为 Launcher、Core 和 Shell 重做自动更新，并避免更新过程影响系统代理。",{"slug":49,"title":50,"summary":51,"date":52,"featured":8,"seoDescription":53,"series":22,"seriesOrder":41},"dev-build-log-ws-mock-dsl","为什么我们重新设计了 WebSocket Mock DSL，而不是用 YAML、JSON 或 JS","轻量 WebSocket Mock 不该比 HTTP Mock 更重。YAML、JSON、JS 都能做，但写「连上、登录、心跳」太啰嗦。我们自研短 DSL，就是让轻量 Mock 更轻。","2026-08-13","DevPeek 开发实录：为什么 WebSocket Mock 自研 Flow DSL。现成 YAML、JSON、JS 能做重活；轻量顺序剧本用更短的文本来写。",{"slug":55,"title":56,"summary":57,"date":58,"featured":8,"seoDescription":59,"series":22,"seriesOrder":60},"dev-build-log-electron-to-tauri","DevPeek 架构改造：抛弃 Electron，拥抱 Tauri","联调工具不该为「开一个窗口」再拖一整套 Chromium。我们把业务收到 Core，桌面壳换成 Tauri，安装更轻、后台更省，关窗后托盘里也能随时唤回来。","2026-08-08","DevPeek 开发实录：桌面壳从 Electron 迁到 Tauri，业务留在 Core，壳只负责窗口与系统能力，体积与资源占用更友好。",2,{"slug":62,"title":63,"summary":64,"date":65,"featured":8,"seoDescription":66,"series":22,"seriesOrder":67},"dev-build-log-sqljs-to-better-sqlite3","抓包历史为什么从 sql.js 迁到原生 SQLite","早期 DevPeek 用纯 JavaScript 版 SQLite 存抓包记录，联调一忙就占内存、列表发紧。我们换成系统级原生 SQLite 后，代理可以连续挂一整天，内存也稳。","2026-08-05","DevPeek 开发实录：抓包历史存储从 sql.js 换成原生 SQLite，解决长时间联调内存上涨、列表卡顿，让代理可以挂一整天。",1,{"slug":69,"title":70,"summary":71,"date":72,"featured":8,"seoDescription":73,"series":10,"seriesOrder":60},"mock-map-route-split-api","API 已迁新服务，前端还没发版？用「转发规则」联调","服务拆分后，前端仍请求旧 API，订单接口却已经迁到新服务。使用 DevPeek「转发规则」无需修改前端代码，即可把指定接口转发到新域名；若新服务未完成，还可以用 Mock 先跑通页面。","2026-07-26","微服务联调与 API 域名迁移：用 DevPeek「转发规则」做 API 转发，不改前端即可把旧域名请求指到新服务；服务迁移未完成时可用 Mock 先验页面。附接口联调 Demo。",{"slug":75,"title":76,"summary":77,"date":78,"featured":8,"seoDescription":79,"series":10,"seriesOrder":67},"api-param-encryption-debug","H5 接口参数加密？DevPeek 一键解密调试","联调时接口参数 AES 加密看不到明文？用 DevPeek 参数转换功能，填好密钥和 IV 就能自动解密，还能改参重放。","2026-07-18","用 DevPeek 参数转换功能解密 AES-GCM 加密的 H5 API 请求，支持双向转换、明文编辑、调试重放。",{"slug":81,"title":82,"summary":83,"date":84,"featured":85,"seoDescription":86,"series":87,"seriesOrder":60},"h5-debug-console-mock","H5 调试实战（二）：Android WebView 白屏排查，从 Console 远程定位到 Mock 验证","活动 H5 在部分 Android 设备中点击按钮后白屏，请求全部 200 却没有页面反馈。通过 DevPeek Console 获取线上 WebView 运行日志，远程 eval 确认 polyfill 覆盖问题，再使用 Mock 验证异常状态下的降级页面。","2026-07-13",true,"H5 调试实战第二篇：排查 Android WebView 白屏问题。通过 Console 远程调试定位 JavaScript polyfill 兼容问题，并结合 Mock 验证接口异常场景下的页面降级逻辑。","h5-debug",{"slug":89,"title":90,"summary":91,"date":92,"featured":85,"seoDescription":93,"series":87,"seriesOrder":67},"wechat-h5-storage-debug","H5 调试实战（一）：微信 H5 localStorage 调试，在电脑上修改真机缓存","微信 H5 换测试号后头像仍显示旧用户，抓包确认接口正常，却定位到 localStorage 遗留旧数据。本文记录一次真实联调过程，以及如何在电脑上查看、修改微信 WebView 的 localStorage、sessionStorage 和 IndexedDB。","2026-07-11","微信 H5 调试实战：通过真实案例定位 localStorage、sessionStorage、IndexedDB 导致的数据缓存问题，对比 vConsole、Remote Debug 等方案，介绍真机 WebView 调试思路。",{"slug":95,"title":96,"summary":97,"date":98,"featured":85,"seoDescription":99,"series":100,"seriesOrder":60},"why-we-built-devpeek-h5-debug","我们为什么做 DevPeek（二）：App 里那页 H5，在电脑上也能对着查","登录接口用参数转换啃下来了，活动页 H5 却在 App WebView 里才崩。真机 remote debug 折腾一圈，DOM 和抓包还是两拨窗口——于是把镜像和自研调试面板收进 DevPeek。","2026-07-10","DevPeek 起源系列第二篇：App 内嵌 H5 只在真机出问题、remote debug 与抓包割裂的联调痛点，以及调试 Tab 如何把页面镜像到电脑并用自研面板查 DOM、Console 与 Network。","origin",{"slug":102,"title":103,"summary":104,"date":105,"featured":85,"seoDescription":106,"series":100,"seriesOrder":67},"why-we-built-devpeek","我们为什么做 DevPeek（一）：HTTPS 解密了，Body 还是天书","版本日前那晚，TLS 早就解开了，改请求里一个字段却还要翻脚本加解密。于是萌生做一个把业务加解密收进代理的工具——DevPeek 从这儿开始。","2026-07-09","DevPeek 起源系列第一篇：联调时请求体加解密的手工折腾，以及为什么先做一款把业务加解密收进代理的工具。",1790244369874]