[{"data":1,"prerenderedAt":83},["ShallowReactive",2],{"case-mock-map-route-split-api-zh":3,"blog-list-zh":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"mock-map-route-split-api","API 已迁新服务，前端还没发版？用「转发规则」联调","服务拆分后，前端仍请求旧 API，订单接口却已经迁到新服务。使用 DevPeek「转发规则」无需修改前端代码，即可把指定接口转发到新域名；若新服务未完成，还可以用 Mock 先跑通页面。","2026-07-26",false,"微服务联调与 API 域名迁移：用 DevPeek「转发规则」做 API 转发，不改前端即可把旧域名请求指到新服务；服务迁移未完成时可用 Mock 先验页面。附接口联调 Demo。","api-debug-new-tricks",2,"\u003Cp>微服务拆分做到一半，是很多团队都会遇到的联调场景。\u003C/p>\n\u003Cp>后端已经把订单服务迁到了 \u003Ccode>b.api.example.com\u003C/code>，但线上 H5 还在请求 \u003Ccode>a.api.example.com\u003C/code>。结果就是：用户接口正常、订单统计正常，唯独订单列表返回 501。\u003C/p>\n\u003Cp>这种时候，问题并不是接口坏了，而是前端和后端还没有完成同一次发版。\u003C/p>\n\u003Cp>等后端迁移完成、等前端发版，再重新联调——往往要排期。接口联调窗口里更现实的做法是：\u003Cstrong>让浏览器继续请求旧 API，由 DevPeek 在代理层配置「转发规则」，把指定 path 指到新域名\u003C/strong>；若新服务暂时连不上，还可以用 \u003Cstrong>Mock\u003C/strong> 先短路响应，把页面 UI 跑通。\u003C/p>\n\u003Cp>本文用 \u003Ca href=\"https://github.com/GYPengDev/devpeek.demo\">devpeek.demo\u003C/a> 里的 \u003Cstrong>mock-map-route-demo\u003C/strong> 案例，演示一次完整的\u003Cstrong>服务迁移联调\u003C/strong>：「转发规则」与 Mock 两条路怎么走，以及规则里 \u003Cstrong>path 前缀\u003C/strong>、\u003Cstrong>port 匹配\u003C/strong>与\u003Cstrong>端口继承\u003C/strong>怎么写。\u003C/p>\n\u003Ch2>适用读者\u003C/h2>\n\u003Cul>\n\u003Cli>微服务 / API 域名迁移进行中，前端暂时不能改 API 基址\u003C/li>\n\u003Cli>已会用 DevPeek 抓包，想试「转发规则」或 Mock\u003C/li>\n\u003Cli>读过 \u003Ca href=\"/blog/api-param-encryption-debug/\">参数转换那篇\u003C/a>，希望继续看「代理链上还能做什么」\u003C/li>\n\u003Cli>还没完成第一次抓包：先看 \u003Ca href=\"/blog/install-first-capture/\">零基础上手：安装 DevPeek 并抓到第一个包\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2>前置：代理、证书与系统代理\u003C/h2>\n\u003Cp>本文 Demo 跑在本机浏览器，流量须先经过 DevPeek 代理，「转发规则」才会生效。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>安装 DevPeek\u003C/strong> 并确认代理端口（默认见标题栏 / 设置）。\u003C/li>\n\u003Cli>\u003Cstrong>设为系统代理\u003C/strong>：菜单 \u003Cstrong>代理 → 设为系统代理\u003C/strong>（本机浏览器抓包时用；抓手机则改 Wi‑Fi 代理，见 \u003Ca href=\"/docs/quick-start/\">快速上手\u003C/a>）。\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-menu-system-proxy.png\" alt=\"设为系统代理\">\u003C/p>\n\u003Cp>\u003Cem>本机联调时在 DevPeek 菜单开启系统代理即可。\u003C/em>\u003C/p>\n\u003Col start=\"3\">\n\u003Cli>\u003Cstrong>安装并信任根证书\u003C/strong>：DevPeek → \u003Cstrong>证书管理\u003C/strong>，按提示安装到「受信任的根证书颁发机构」。否则 HTTPS 只能看到 CONNECT 隧道，看不到明文请求与响应。完整步骤见 \u003Ca href=\"/blog/install-first-capture/\">零基础上手\u003C/a> 与 \u003Ca href=\"/docs/proxy-ssl/\">代理与 SSL 证书\u003C/a>。\u003C/li>\n\u003Cli>\u003Cstrong>（可选）\u003C/strong> 若抓 HTTPS 业务域名，把对应 Host 加入 \u003Cstrong>SSL 解密范围\u003C/strong>（本 Demo 为 \u003Ccode>http://*.demo.test:3002\u003C/code>，纯 HTTP，可跳过）。\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 打开任意网页，DevPeek 抓包列表里能看到对应 HTTP(S) 记录。\u003C/p>\n\u003Ch2>案例场景：三个域名，一套服务\u003C/h2>\n\u003Cp>Demo 在本地 \u003Ccode>:3002\u003C/code> 起了一个 Express，用 \u003Cstrong>Host 头\u003C/strong>区分「旧 API」「新 API」和「页面」——模拟典型的 \u003Cstrong>API 域名迁移\u003C/strong> 中间态：\u003C/p>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>域名\u003C/th>\n\u003Cth>角色\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>page.demo.test\u003C/code>\u003C/td>\n\u003Ctd>打开 H5 页面\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>a.api.demo.test\u003C/code>\u003C/td>\n\u003Ctd>前端硬编码的 API（旧）\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>b.api.demo.test\u003C/code>\u003C/td>\n\u003Ctd>订单接口所在（新）\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\n\u003Cp>接口行为（简化）：\u003C/p>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>接口\u003C/th>\n\u003Cth>a.api\u003C/th>\n\u003Cth>b.api\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>GET /api/user/profile\u003C/code>\u003C/td>\n\u003Ctd>✅ 200\u003C/td>\n\u003Ctd>✅ 200\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET /api/orders/stats\u003C/code>\u003C/td>\n\u003Ctd>✅ 200\u003C/td>\n\u003Ctd>✅ 200\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET /api/orders/list\u003C/code>\u003C/td>\n\u003Ctd>❌ 501\u003C/td>\n\u003Ctd>✅ 200\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\n\u003Cp>前端 \u003Ccode>script.js\u003C/code> 里三个请求都写死为 \u003Ccode>http://a.api.demo.test:3002/...\u003C/code>。未配「转发规则」时，页面底部订单区会显示 501 和提示文案——这就是服务拆分进行中的常态。\u003C/p>\n\u003Ch2>步骤一：跑起 Demo\u003C/h2>\n\u003Cpre>\u003Ccode class=\"language-bash\">git clone https://github.com/GYPengDev/devpeek.demo.git\ncd devpeek.demo\npnpm install\npnpm --filter @devpeek/mock-map-route-demo dev\n\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>hosts\u003C/strong>（三域名都指本机）：\u003C/p>\n\u003Cpre>\u003Ccode>127.0.0.1  page.demo.test a.api.demo.test b.api.demo.test\n\u003C/code>\u003C/pre>\n\u003Cp>浏览器打开 \u003Ccode>http://page.demo.test:3002/\u003C/code>，点 \u003Cstrong>🔄 重新检测\u003C/strong>。\u003C/p>\n\u003Cp>\u003Cstrong>此时不要开启任何「转发规则」\u003C/strong>——先确认基线：订单接口在旧域名上确实 501。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 用户信息、订单统计加载成功；订单列表显示 \u003Cstrong>a.api — 501 未实现\u003C/strong>；进度条停在步骤 1。\u003C/p>\n\u003Cp>在 DevPeek 抓包列表里，此时 \u003Ccode>a.api.demo.test\u003C/code> 的 \u003Ccode>/api/orders/list\u003C/code> 仍返回 501：\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-a-api-before-forward-list.png\" alt=\"未配置转发时的抓包列表\">\u003C/p>\n\u003Cp>\u003Cem>列表里 Host 仍是 a.api；订单接口 501。\u003C/em>\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-a-api-before-forward-501-response.png\" alt=\"未转发时的 501 响应体\">\u003C/p>\n\u003Cp>\u003Cem>响应体提示 a.api 未实现，需通过「转发规则」转到 b.api。\u003C/em>\u003C/p>\n\u003Ch2>步骤二：「转发规则」— 只转发订单相关 path\u003C/h2>\n\u003Cp>入口：\u003Cstrong>规则 → 「转发规则」\u003C/strong>（或抓包页左侧 \u003Cstrong>转发\u003C/strong> 面板）。\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-menu-forward-rules.png\" alt=\"「转发规则」入口\">\u003C/p>\n\u003Cp>添加一行（制表符或空格分隔）：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002/api/orders    b.api.demo.test/api/orders\n\u003C/code>\u003C/pre>\n\u003Cp>这条规则表示：\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>匹配侧\u003C/strong>写了 \u003Ccode>:3002\u003C/code>，只匹配 Host 为 \u003Ccode>a.api.demo.test:3002\u003C/code> 的请求；不写 port 则匹配任意端口。\u003C/li>\n\u003Cli>\u003Cstrong>目标侧\u003C/strong>没写 port，\u003Cstrong>继承请求端口\u003C/strong>（这里是 3002），不必两边都写死 \u003Ccode>:3002\u003C/code>。\u003C/li>\n\u003Cli>只匹配 \u003Ccode>/api/orders\u003C/code> 及其子 path（如 \u003Ccode>/api/orders/list\u003C/code>）；\u003Ccode>/api/user/profile\u003C/code> 仍走 a.api。\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-forward-rule-filled.png\" alt=\"「转发规则」中的端口继承\">\u003C/p>\n\u003Cp>\u003Cem>匹配侧写了 \u003Ccode>:3002\u003C/code>，目标侧只写 host——上游端口继承自请求。\u003C/em>\u003C/p>\n\u003Cp>保存后，path 级规则在窗口里应类似：\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-forward-rule-filled-with-port.png\" alt=\"path 级「转发规则」示例\">\u003C/p>\n\u003Cp>\u003Cem>只转发 \u003Ccode>/api/orders\u003C/code> 及其子 path；\u003Ccode>/api/user/profile\u003C/code> 仍走 a.api。\u003C/em>\u003C/p>\n\u003Cp>若整站 API 都已迁到新域名，可以用 \u003Cstrong>host 级\u003C/strong>规则，a 下所有子路由原样转到 b：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">a.api.demo.test:3002    b.api.demo.test\n\u003C/code>\u003C/pre>\n\u003Cp>（目标侧同样可省略 port，继承请求端口。）\u003C/p>\n\u003Cp>确认 \u003Ca href=\"#%E5%89%8D%E7%BD%AE%E4%BB%A3%E7%90%86%E8%AF%81%E4%B9%A6%E4%B8%8E%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86\">系统代理已开启\u003C/a>（上文），回到页面点 \u003Cstrong>重新检测\u003C/strong>。\u003C/p>\n\u003Cp>\u003Cstrong>完成标准：\u003C/strong> 订单列表出现表格数据；页面状态显示转发已生效；终端日志类似：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">→ [GET] Host: b.api.demo.test:3002  /api/orders/list\n\u003C/code>\u003C/pre>\n\u003Cp>抓包详情 \u003Cstrong>概览\u003C/strong> 里会出现 \u003Cstrong>转发 URL\u003C/strong>，表示实际上游已打到 b.api，列表里仍保留浏览器原始 URL，便于对照契约。详见 \u003Ca href=\"/docs/map-route/\">「转发规则」文档\u003C/a>。\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-a-api-after-forward-list.png\" alt=\"转发生效后的抓包列表\">\u003C/p>\n\u003Cp>\u003Cem>同一条请求：列表仍显示 a.api，详情里可看实际上游。\u003C/em>\u003C/p>\n\u003Cp>\u003Cimg src=\"/docs/figures/demo2/demo2-a-api-after-forward-detail.png\" alt=\"请求详情中的转发 URL\">\u003C/p>\n\u003Cp>\u003Cem>概览中的「转发 URL」指向 b.api.demo.test:3002。\u003C/em>\u003C/p>\n\u003Ch2>步骤三（可选）：Mock — 新服务还没起来时\u003C/h2>\n\u003Cp>若 b.api 暂时不可达，但你想先验订单列表 UI，可以对 \u003Ccode>GET .../api/orders/list\u003C/code> 建一条 \u003Cstrong>自动 Mock\u003C/strong>，直接返回 JSON（页面底部「Mock 备选方案」有示例数据）。\u003C/p>\n\u003Ch3>「转发规则」和 Mock 的区别\u003C/h3>\n\u003Cp>很多人第一次做\u003Cstrong>微服务联调\u003C/strong>都会纠结：该用「转发规则」，还是直接 Mock？\u003C/p>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C/th>\n\u003Cth>「转发规则」\u003C/th>\n\u003Cth>Mock\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>是否访问真实上游\u003C/td>\n\u003Ctd>✅ 是\u003C/td>\n\u003Ctd>❌ 否（短路）\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>典型用途\u003C/td>\n\u003Ctd>新服务已就绪，做 API 转发\u003C/td>\n\u003Ctd>服务迁移未完成，先验页面\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>匹配依据\u003C/td>\n\u003Ctd>host + path + port\u003C/td>\n\u003Ctd>Mock 规则（URL、Method 等）\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\n\u003Cp>「转发规则」在代理层把请求\u003Cstrong>真连\u003C/strong>到新服务，适合新域名已部署、只是前端还没发版。Mock 则\u003Cstrong>短路\u003C/strong>上游，适合接口联调时新服务尚未就绪、只想先看 UI。\u003C/p>\n\u003Cp>两者可组合：先配「转发规则」指到测试机，再对某 path Mock 错误码。配置入口见 \u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a>。\u003C/p>\n\u003Ch2>「转发规则」语法\u003C/h2>\n\u003Cp>一条规则由 \u003Cstrong>匹配地址（Pattern）\u003C/strong> 和 \u003Cstrong>目标地址（Target）\u003C/strong> 两部分组成，写法为：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">Pattern → Target\n\u003C/code>\u003C/pre>\n\u003Cp>地址格式：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">[http(s)://]host[:port][/pathPrefix]\n\u003C/code>\u003C/pre>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>维度\u003C/th>\n\u003Cth>匹配侧（Pattern）\u003C/th>\n\u003Cth>目标侧（Target）\u003C/th>\n\u003C/tr>\n\u003C/thead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Cstrong>port\u003C/strong>\u003C/td>\n\u003Ctd>写了则必须等于请求端口；不写则任意端口\u003C/td>\n\u003Ctd>写了则固定；\u003Cstrong>不写则继承请求 Host 端口\u003C/strong>\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>path\u003C/strong>\u003C/td>\n\u003Ctd>写了则只匹配该前缀及子 path；不写则整站 host\u003C/td>\n\u003Ctd>可与 Pattern 不同，用于 path 重写\u003C/td>\n\u003C/tr>\n\u003Ctr>\n\u003Ctd>\u003Cstrong>scheme\u003C/strong>\u003C/td>\n\u003Ctd>写了 \u003Ccode>http://\u003C/code> / \u003Ccode>https://\u003C/code> 则须一致\u003C/td>\n\u003Ctd>指本地 HTTP 时建议写 \u003Ccode>http://\u003C/code>\u003C/td>\n\u003C/tr>\n\u003C/tbody>\u003C/table>\n\u003Cp>\u003Cstrong>优先级：\u003C/strong> 最长 path 前缀优先；同 path 时，带 port 的规则更具体。\u003C/p>\n\u003Cp>\u003Cstrong>path 重写示例\u003C/strong>（进阶）：若请求 path 与上游 path 结构不一致，可写：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">a.example.com/route1/route2    b.example.com/route1\n\u003C/code>\u003C/pre>\n\u003Cp>请求 \u003Ccode>/route1/route2/orders/list\u003C/code> → 上游 \u003Ccode>/route1/orders/list\u003C/code>（去掉匹配前缀，余下部分拼到目标前缀后）。\u003C/p>\n\u003Cp>CONNECT 隧道仅应用\u003Cstrong>无 path\u003C/strong> 的主机级规则；HTTP(S) 请求才走 path 级匹配。\u003C/p>\n\u003Ch2>和抓包、页面调试在同一条链\u003C/h2>\n\u003Cp>「转发规则」只修改代理层的目标地址，\u003Cstrong>不会修改浏览器发起的请求 URL\u003C/strong>。抓包列表里仍显示客户端原始 Host 与 path。因此：\u003C/p>\n\u003Cul>\n\u003Cli>Mock 仍按抓包列表里的 URL 匹配；\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/debug-replay/\">移动端网页调试\u003C/a> 里点按钮触发的请求，同样经过转发；\u003C/li>\n\u003Cli>与 \u003Ca href=\"/docs/param-transform/\">参数转换\u003C/a> 组合：先转发到测试环境，再解密参数、改 Mock。\u003C/li>\n\u003C/ul>\n\u003Cp>典型\u003Cstrong>接口联调\u003C/strong>顺序：\u003Cstrong>「转发规则」（指到正确服务）→ 参数转换（看明文）→ Mock（模拟异常）\u003C/strong>。\u003C/p>\n\u003Ch2>容易卡住的地方\u003C/h2>\n\u003Cp>\u003Cstrong>订单仍 501\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>「转发规则」是否保存且未注释（行首 \u003Ccode>#\u003C/code>）？\u003C/li>\n\u003Cli>\u003Ca href=\"#%E5%89%8D%E7%BD%AE%E4%BB%A3%E7%90%86%E8%AF%81%E4%B9%A6%E4%B8%8E%E7%B3%BB%E7%BB%9F%E4%BB%A3%E7%90%86\">系统代理\u003C/a>是否已开启？\u003C/li>\n\u003Cli>path 是否写对：订单是 \u003Ccode>/api/orders/list\u003C/code>，规则前缀至少要到 \u003Ccode>/api/orders\u003C/code>。\u003C/li>\n\u003Cli>本地 dev 端口：匹配侧建议写 \u003Ccode>:3002\u003C/code>，或确认请求 Host 与规则一致。\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>用户/统计也挂了\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>若用了 \u003Cstrong>host 级\u003C/strong>整站转发，确认 b.api 上 profile/stats 也可用；否则改用 \u003Cstrong>path 级\u003C/strong>，只转发 \u003Ccode>/api/orders\u003C/code>。\u003C/li>\n\u003Cli>检查 hosts 是否包含 \u003Ccode>a.api.demo.test\u003C/code>。\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>概览没有「转发 URL」\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>该请求未命中任何「转发规则」，或目标 host:port 与原始完全相同（视为未转发）。见 \u003Ca href=\"/docs/faq/\">常见问题\u003C/a>。\u003C/li>\n\u003C/ul>\n\u003Ch2>下一篇\u003C/h2>\n\u003Cp>\u003Cstrong>\u003Ca href=\"/blog/https-ssl-skip-decrypt/\">开了 SSL 抓包，有些网站反而打不开？把域名加进「跳过 SSL 代理」\u003C/a>\u003C/strong>——直连正常、一开 SSL 代理个别站失败时，优先把域名加进 Exclude，而不是关掉整站抓包。\u003C/p>\n\u003Chr>\n\u003Cp>如果你也遇到过「后端已经迁服务、前端却还没发版」的联调问题，不妨 \u003Ca href=\"/\">下载 DevPeek\u003C/a>，按照本文的 Demo 跑一遍。从「转发规则」到 Mock 验页面，全程无需改一行前端代码。案例源码见 \u003Ca href=\"https://github.com/GYPengDev/devpeek.demo/tree/main/cases/mock-map-route-demo\">devpeek.demo / mock-map-route-demo\u003C/a>，也欢迎到 \u003Ca href=\"https://github.com/GYPengDev/devpeek/discussions\">GitHub Discussions\u003C/a> 聊聊你的 \u003Cstrong>API 域名迁移\u003C/strong> 方案。\u003C/p>\n\u003Ch2>相关文档\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/docs/map-route/\">「转发规则」\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/mock/\">Mock 规则\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/capture/\">抓包界面与请求详情\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/proxy-ssl/\">代理与 SSL 证书\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/quick-start/\">快速上手\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/blog/install-first-capture/\">零基础上手：安装 DevPeek 并抓到第一个包\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2>系列文章\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/blog/api-param-encryption-debug/\">H5 接口参数加密？DevPeek 一键解密调试\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/blog/https-ssl-skip-decrypt/\">开了 SSL 抓包，有些网站反而打不开？把域名加进「跳过 SSL 代理」\u003C/a>\u003C/li>\n\u003C/ul>\n",{"items":14},[15,22,30,36,42,49,50,56,64,70,77],{"slug":16,"title":17,"summary":18,"date":19,"featured":8,"seoDescription":20,"series":10,"seriesOrder":21},"https-ssl-skip-decrypt","开了 SSL 抓包，有些网站反而打不开？把域名加进「跳过 SSL 代理」","系统代理和证书都没问题，一开 SSL 代理个别站却打不开。多半是源站证书和 Host 对不上。把域名加进「跳过 SSL 代理（隧道）」即可，不必关掉整站 SSL 抓包。","2026-09-01","DevPeek 开了 SSL 代理后部分网站打不开？ERR_TLS_CERT_ALTNAME_INVALID 是源站证书与 Host 不匹配，不是 CA 未信任。用 Include / Exclude：把域名加入「跳过 SSL 代理（隧道）」。",3,{"slug":23,"title":24,"summary":25,"date":26,"featured":8,"seoDescription":27,"series":28,"seriesOrder":29},"dev-build-log-silent-auto-update","换掉 Electron 后，自动更新也得重做","DevPeek 换成 Tauri 后，更新的不只是一个窗口，而是 Launcher、Core 和 Shell 三个进程。我们把检查和下载挪到后台，等安装包准备好后，再由托盘完成最后一次重启。","2026-08-28","DevPeek 开发实录：桌面端从 Electron 换到 Tauri 后，如何为 Launcher、Core 和 Shell 重做自动更新，并避免更新过程影响系统代理。","dev-build-log",4,{"slug":31,"title":32,"summary":33,"date":34,"featured":8,"seoDescription":35,"series":28,"seriesOrder":21},"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":37,"title":38,"summary":39,"date":40,"featured":8,"seoDescription":41,"series":28,"seriesOrder":11},"dev-build-log-electron-to-tauri","DevPeek 架构改造：抛弃 Electron，拥抱 Tauri","联调工具不该为「开一个窗口」再拖一整套 Chromium。我们把业务收到 Core，桌面壳换成 Tauri，安装更轻、后台更省，关窗后托盘里也能随时唤回来。","2026-08-08","DevPeek 开发实录：桌面壳从 Electron 迁到 Tauri，业务留在 Core，壳只负责窗口与系统能力，体积与资源占用更友好。",{"slug":43,"title":44,"summary":45,"date":46,"featured":8,"seoDescription":47,"series":28,"seriesOrder":48},"dev-build-log-sqljs-to-better-sqlite3","抓包历史为什么从 sql.js 迁到原生 SQLite","早期 DevPeek 用纯 JavaScript 版 SQLite 存抓包记录，联调一忙就占内存、列表发紧。我们换成系统级原生 SQLite 后，代理可以连续挂一整天，内存也稳。","2026-08-05","DevPeek 开发实录：抓包历史存储从 sql.js 换成原生 SQLite，解决长时间联调内存上涨、列表卡顿，让代理可以挂一整天。",1,{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":51,"title":52,"summary":53,"date":54,"featured":8,"seoDescription":55,"series":10,"seriesOrder":48},"api-param-encryption-debug","H5 接口参数加密？DevPeek 一键解密调试","联调时接口参数 AES 加密看不到明文？用 DevPeek 参数转换功能，填好密钥和 IV 就能自动解密，还能改参重放。","2026-07-18","用 DevPeek 参数转换功能解密 AES-GCM 加密的 H5 API 请求，支持双向转换、明文编辑、调试重放。",{"slug":57,"title":58,"summary":59,"date":60,"featured":61,"seoDescription":62,"series":63,"seriesOrder":11},"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":65,"title":66,"summary":67,"date":68,"featured":61,"seoDescription":69,"series":63,"seriesOrder":48},"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":71,"title":72,"summary":73,"date":74,"featured":61,"seoDescription":75,"series":76,"seriesOrder":11},"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":78,"title":79,"summary":80,"date":81,"featured":61,"seoDescription":82,"series":76,"seriesOrder":48},"why-we-built-devpeek","我们为什么做 DevPeek（一）：HTTPS 解密了，Body 还是天书","版本日前那晚，TLS 早就解开了，改请求里一个字段却还要翻脚本加解密。于是萌生做一个把业务加解密收进代理的工具——DevPeek 从这儿开始。","2026-07-09","DevPeek 起源系列第一篇：联调时请求体加解密的手工折腾，以及为什么先做一款把业务加解密收进代理的工具。",1788746290275]