[{"data":1,"prerenderedAt":101},["ShallowReactive",2],{"case-dev-build-log-android-apk-zh":3,"blog-list-zh":13},{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11,"html":12},"dev-build-log-android-apk","测试机借来借去，我们不想再改系统代理","测试机在团队里转一次，Wi-Fi 代理就要跟着改一次。普通 App 写不了系统代理，于是我们做了 Android 配套 App，用 VpnService 把「换 IP、换端口」收成扫码切换。","2026-09-14",false,"DevPeek 开发实录：为什么做 Android 配套 App。测试机在团队里流转时不再反复修改 Wi-Fi 代理，而是通过 VpnService 扫码切换当前抓包电脑。","dev-build-log",5,"\u003Ch2>「这台手机的包怎么还在我这里？」\u003C/h2>\n\u003Cp>联调到一半，隔壁同事把测试机拿走了。他电脑上的 DevPeek 已经开着，\u003Ca href=\"/docs/mock/\">Mock\u003C/a> 和 \u003Ca href=\"/docs/param-transform/\">参数转换\u003C/a> 也配好了，手机却还记着我的代理地址。\u003C/p>\n\u003Cp>过了一会儿，我的抓包列表里还在冒请求，他那边一条都没有。\u003C/p>\n\u003Cblockquote>\n\u003Cp>「这台手机现在到底连的是谁？」\u003C/p>\n\u003C/blockquote>\n\u003Cp>以前只能打开 Wi-Fi 详情，找到代理设置，把主机名改成他的局域网 IP，再核对端口。还机时改回来，下一个人借走时再改一次。不同品牌入口不一样，有的藏在「高级选项」里。\u003C/p>\n\u003Cp>这套动作不难，但是它发生得太频繁，而且没有人会把「还机前清代理」当成一项正式流程。忘了切，包继续打到上一位同事；忘了清，测试机离开办公室后可能连网页都打不开。一个人在自己手机上调试时还好，一台设备在开发、测试之间转起来，几步系统设置就成了持续的摩擦。\u003C/p>\n\u003Cp>我们想把交接收成一句话：\u003Cstrong>扫谁的码，包就进谁的 DevPeek。\u003C/strong>\u003C/p>\n\u003Ch2>普通 App 改不了系统代理\u003C/h2>\n\u003Cp>最直接的想法，是做一个小工具保存几组 IP 和端口，点一下就替用户改好 Wi-Fi 代理。\u003C/p>\n\u003Cp>但 Android 没给普通 App 这项权限。Wi-Fi 的 HTTP 代理属于系统网络配置，第三方应用可以把地址显示出来、复制出来，却不能静默写进去。除非设备被 Root、由企业 MDM 管理，或者应用本身是 Device Owner——这些都不适合一台普通团队测试机。\u003C/p>\n\u003Cp>只做一个「代理地址收藏夹」并没有解决问题：点完收藏，用户还是得回系统设置粘贴。借一次机改一次，原来的摩擦几乎原封不动。\u003C/p>\n\u003Cp>继续找系统允许的路径时，我们注意到了 \u003Cstrong>VpnService\u003C/strong>。它原本是 Android 留给 VPN 客户端的接口：经用户明确授权，应用可以建立一张虚拟网卡，决定流量从哪里出去。Android 10 又给它补了 \u003Ccode>setHttpProxy\u003C/code>，允许给这张虚拟网卡声明 HTTP 代理。\u003C/p>\n\u003Cp>这正好绕开了「修改 Wi-Fi 配置」：\u003C/p>\n\u003Cul>\n\u003Cli>Android 10 及以上，通过 \u003Ccode>VpnService.setHttpProxy\u003C/code> 把认系统 HTTP 代理的流量交给当前这台 DevPeek；\u003C/li>\n\u003Cli>Android 8–9 没有这条 API，走 \u003Ccode>TUN → SOCKS5 → HTTP CONNECT → DevPeek\u003C/code>；\u003C/li>\n\u003Cli>设置里原来的 Wi-Fi 代理不动，断开 VPN 后，手机回到原来的网络路径。\u003C/li>\n\u003C/ul>\n\u003Cp>VPN 在这里不是为了把 DevPeek 做成手机 VPN 产品，而是普通 App 无法改系统代理之后，系统仍然允许用户授权的一条路。\u003C/p>\n\u003Ch2>「一键」实际指什么\u003C/h2>\n\u003Cp>我们一直给「一键」加引号，因为第一次使用并不是真的点一下就结束：要安装 App，要允许系统 VPN，有 HTTPS 解密需求时还要装 CA。系统弹出的授权和警告也不该被绕开。\u003C/p>\n\u003Cp>真正想省掉的是：\u003Cstrong>每次换人，都进系统设置重填代理。\u003C/strong>\u003C/p>\n\u003Cp>电脑与手机在同一局域网时，DevPeek 的手机面板会出一张配对码。它不是原来的证书下载码，而是一条 \u003Ccode>devpeek://proxy\u003C/code> 链接，里面带着协议版本、代理端口、电脑显示名，以及可能可用的局域网 IP：\u003C/p>\n\u003Cpre>\u003Ccode class=\"language-text\">devpeek://proxy?v=1&host=192.168.1.23&ips=192.168.1.23,10.0.0.2&port=8888&name=Alice\n\u003C/code>\u003C/pre>\n\u003Cp>手机扫码后，会按顺序短探测这些地址，找到当前网络里真正可达的那一个，再申请建立 VPN。这样电脑同时开着 Wi-Fi、网线或虚拟网卡时，不必让拿手机的人猜该填哪张网卡的 IP。扫不了码，仍可以从相册识别、粘贴链接或手填地址。\u003C/p>\n\u003Cp>连过的电脑会留在历史里，并显示名字、IP 和端口。测试机再次回到同一位同事手里，可以从历史直接连接；换给另一个人，就扫另一张码。App 会持续检查桌面代理是否还活着，连续连接失败时主动断开，而不是保留一个看起来正常、实际上已经失效的出口。\u003C/p>\n\u003Cp>还机前仍建议点「断开」。不断开时，新请求可能继续进入上一台电脑——这正是原来借机场景最容易漏的事。至少现在连接对象会明确显示在 App 顶部和系统常驻通知里，不必再回忆 Wi-Fi 设置中填过哪个 IP。\u003C/p>\n\u003Cp>桌面上的 \u003Ca href=\"/docs/collaboration/\">局域网协作\u003C/a> 解决的是电脑之间发现伙伴、发送请求或调试录制；配套 App 解决的是\u003Cstrong>同一台测试机在人之间交接\u003C/strong>。它们服务同一个团队，却不是同一条链路。\u003C/p>\n\u003Cp>手机也只负责把流量送进当前这台电脑。抓包、解密、Mock、参数转换和页面调试仍由桌面 DevPeek 完成，和 \u003Ca href=\"/docs/quick-start/\">快速上手\u003C/a> 里的代理链路没有分叉。\u003C/p>\n\u003Ch2>证书还是要装，只是不用再自己找下载\u003C/h2>\n\u003Cp>代理切过去以后，HTTP 会先进入列表。要看到 HTTPS 明文，手机仍然必须信任\u003Cstrong>当前这台电脑\u003C/strong>的 DevPeek CA。VPN 解决的是流量往哪里走，证书解决的是客户端是否接受中间人解密，两件事不能互相替代。\u003C/p>\n\u003Cp>以前通常还要让电脑再出一张证书码，用浏览器下载文件，然后回到系统设置里找到它。现在 App 已经知道连的是哪台电脑，便可以直接向它请求 \u003Ccode>/devpeek-ca.crt\u003C/code>，写入手机的「下载」目录，再打开系统设置。\u003C/p>\n\u003Cp>到这里就是普通 App 能做的上限。Android 11 之后，应用不能再通过 KeyChain 直接发起 CA 安装；最终确认必须由用户在系统设置里完成。所以按钮没有叫「一键安装」，而是很具体的 \u003Cstrong>保存并打开设置\u003C/strong>：\u003C/p>\n\u003Col>\n\u003Cli>手机须已设锁屏（PIN / 图案）\u003C/li>\n\u003Cli>点按钮后，确认文件已保存到「下载 / \u003Ccode>devpeek-ca.crt\u003C/code>」\u003C/li>\n\u003Cli>进入「安全 → 加密与凭据 → 安装证书 → CA 证书」\u003C/li>\n\u003Cli>不要选「VPN 和应用」\u003C/li>\n\u003Cli>选刚保存的 \u003Ccode>devpeek-ca.crt\u003C/code>，确认警告后返回\u003C/li>\n\u003C/ol>\n\u003Cp>不同厂商的菜单名字可能不同，这一步没法假装不存在。我们能减少的是重复找下载入口、确认证书来自哪台电脑；不能替用户接受一张根 CA。\u003C/p>\n\u003Cp>未安装 App 的设备仍可使用桌面上的「扫码下载证书」。配对码和证书码继续分开：前者决定流量去哪里，后者只负责取得 CA。完整的证书信任与 SSL 解密范围见 \u003Ca href=\"/docs/proxy-ssl/\">代理与 SSL 证书\u003C/a>。\u003C/p>\n\u003Ch2>VPN 图标亮了，不等于整台手机都被抓了\u003C/h2>\n\u003Cp>这里还有一个容易误解的地方：VpnService 建起的是流量入口，不代表我们把整台手机的所有连接都送到电脑。\u003C/p>\n\u003Cp>在 Android 10 及以上，Chrome、系统浏览器和常见 WebView 这类认系统 HTTP 代理的客户端会进入 DevPeek；不认代理的连接会经虚拟网卡直接回到手机原来的网络。这样做的目标是让测试机保持可用，而不是为了抓一个 H5，把所有后台同步、推送和其它应用流量都灌进桌面列表。\u003C/p>\n\u003Cp>因此边界也很明确：\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>不是所有 App 都会进代理\u003C/strong>：很多原生 App 不认系统 HTTP 代理，会直接联网。\u003C/li>\n\u003Cli>\u003Cstrong>用户 CA 不是系统 CA\u003C/strong>：Android 7+ 默认不让普通 App 信任用户证书。微信等应用即使装了 CA，HTTPS 也可能无法解密；调试时仍需明确允许用户证书的构建。\u003C/li>\n\u003Cli>\u003Cstrong>UDP / QUIC 不保证进入 DevPeek\u003C/strong>：需要时让目标页面回退到 TCP / HTTP，不能把 VPN 图标当作全协议接管。\u003C/li>\n\u003Cli>\u003Cstrong>仍受局域网约束\u003C/strong>：手机和电脑须处于可互通的网络，电脑防火墙也要放行代理端口。\u003C/li>\n\u003Cli>\u003Cstrong>目前不做按应用过滤、系统证书注入和 iOS\u003C/strong>：这些不是藏起来的开关，而是尚未覆盖的能力。\u003C/li>\n\u003C/ul>\n\u003Cp>它也不是手机上的独立抓包台，不替代连得上时的 Chrome Inspect。它只把团队最常重复的那一步——\u003Cstrong>测试机换人时重设代理\u003C/strong>——从系统设置里拿了出来。流量进入桌面后，怎么筛选、看详情和重发，仍以 \u003Ca href=\"/docs/capture/\">抓包与过滤\u003C/a> 为准。\u003C/p>\n\u003Ch2>从「改设置」缩短到「确认连接对象」\u003C/h2>\n\u003Cp>回过头看，这个 App 的起点不是「DevPeek 也要有一个移动端」，而是一台测试机在团队里转来转去时，代理地址跟不上人。\u003C/p>\n\u003Cp>我们没法消掉 Android 的 VPN 授权，也不能替用户安装根证书；更不能承诺所有 App、所有协议都被接管。能做的是把每次都要重复的 IP、端口和网卡判断交给配对码，把当前连接对象明明白白地显示出来，把断开和切换留在同一个入口。\u003C/p>\n\u003Cp>原来是「进系统设置，确认现在填的是谁的 IP」。现在尽量缩短成「看一眼名字，扫一下码」。\u003C/p>\n\u003Ch2>相关文档\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/docs/android-app/\">Android 配套 App\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/quick-start/\">快速上手\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/proxy-ssl/\">代理与 SSL 证书\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/capture/\">抓包与过滤\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/collaboration/\">局域网协作\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"/docs/faq/\">常见问题\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2>下一篇\u003C/h2>\n\u003Cp>\u003Cstrong>\u003Ca href=\"/blog/dev-build-log-android-file-transfer-assistant/\">测试机连上以后，我们又做了个文件互传助手\u003C/a>\u003C/strong>——测试机没有聊天软件，也不该登录个人账号；既然已经与电脑配对，就顺手让文字、图片、视频和文件通过局域网直接互传。\u003C/p>\n\u003Chr>\n\u003Cp>配套 App 还在随桌面 1.4.x 打磨，目前不上架。电脑侧仍从 \u003Ca href=\"/\">DevPeek 官网\u003C/a> 下载；扫码连接、VPN 授权与证书安装步骤见 \u003Ca href=\"/docs/android-app/\">Android 配套 App 文档\u003C/a>。如果你也遇到过借机、切代理或安装证书的摩擦，欢迎到 \u003Ca href=\"https://github.com/GYPengDev/devpeek/discussions\">GitHub Discussions\u003C/a> 说说团队怎么使用测试机。\u003C/p>\n",{"items":14},[15,16,22,29,36,42,48,55,62,68,74,82,88,95],{"slug":4,"title":5,"summary":6,"date":7,"featured":8,"seoDescription":9,"series":10,"seriesOrder":11},{"slug":17,"title":18,"summary":19,"date":7,"featured":8,"seoDescription":20,"series":10,"seriesOrder":21},"dev-build-log-android-file-transfer-assistant","测试机连上以后，我们又做了个文件互传助手","团队测试机通常没有聊天软件，也不会登录个人账号，传一个 URL、截图或安装包都很麻烦。Android 配套 App 做完后，我们顺手在已有配对链路旁加了一条局域网互传通道。","DevPeek 开发实录：团队测试机没有聊天软件时，如何通过 Android 配套 App 的独立 WebSocket 与 HTTP 局域网通道，在手机和电脑之间互传文字、图片、视频和文件。",6,{"slug":23,"title":24,"summary":25,"date":7,"featured":8,"seoDescription":26,"series":27,"seriesOrder":28},"https-origin-cert-mismatch","源站证书与域名不匹配？DevPeek 为什么仍能正常抓包","DevPeek 检测到源站证书与 Host 不匹配时，不会静默忽略，也不会直接中断调试；网站和 HTTPS 明文仍可查看，同时会在请求详情中标记证书异常。","遇到 ERR_TLS_CERT_ALTNAME_INVALID 时，DevPeek 为什么仍能打开网站并查看 HTTPS 明文？本文说明源站证书、Host 与 SAN 的关系，以及 DevPeek 如何继续解密并明确报告证书风险。","api-debug-new-tricks",4,{"slug":30,"title":31,"summary":32,"date":33,"featured":8,"seoDescription":34,"series":27,"seriesOrder":35},"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":37,"title":38,"summary":39,"date":40,"featured":8,"seoDescription":41,"series":10,"seriesOrder":28},"dev-build-log-silent-auto-update","换掉 Electron 后，自动更新也得重做","DevPeek 换成 Tauri 后，更新的不只是一个窗口，而是 Launcher、Core 和 Shell 三个进程。我们把检查和下载挪到后台，等安装包准备好后，再由托盘完成最后一次重启。","2026-08-28","DevPeek 开发实录：桌面端从 Electron 换到 Tauri 后，如何为 Launcher、Core 和 Shell 重做自动更新，并避免更新过程影响系统代理。",{"slug":43,"title":44,"summary":45,"date":46,"featured":8,"seoDescription":47,"series":10,"seriesOrder":35},"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":49,"title":50,"summary":51,"date":52,"featured":8,"seoDescription":53,"series":10,"seriesOrder":54},"dev-build-log-electron-to-tauri","DevPeek 架构改造：抛弃 Electron，拥抱 Tauri","联调工具不该为「开一个窗口」再拖一整套 Chromium。我们把业务收到 Core，桌面壳换成 Tauri，安装更轻、后台更省，关窗后托盘里也能随时唤回来。","2026-08-08","DevPeek 开发实录：桌面壳从 Electron 迁到 Tauri，业务留在 Core，壳只负责窗口与系统能力，体积与资源占用更友好。",2,{"slug":56,"title":57,"summary":58,"date":59,"featured":8,"seoDescription":60,"series":10,"seriesOrder":61},"dev-build-log-sqljs-to-better-sqlite3","抓包历史为什么从 sql.js 迁到原生 SQLite","早期 DevPeek 用纯 JavaScript 版 SQLite 存抓包记录，联调一忙就占内存、列表发紧。我们换成系统级原生 SQLite 后，代理可以连续挂一整天，内存也稳。","2026-08-05","DevPeek 开发实录：抓包历史存储从 sql.js 换成原生 SQLite，解决长时间联调内存上涨、列表卡顿，让代理可以挂一整天。",1,{"slug":63,"title":64,"summary":65,"date":66,"featured":8,"seoDescription":67,"series":27,"seriesOrder":54},"mock-map-route-split-api","API 已迁新服务，前端还没发版？用「转发规则」联调","服务拆分后，前端仍请求旧 API，订单接口却已经迁到新服务。使用 DevPeek「转发规则」无需修改前端代码，即可把指定接口转发到新域名；若新服务未完成，还可以用 Mock 先跑通页面。","2026-07-26","微服务联调与 API 域名迁移：用 DevPeek「转发规则」做 API 转发，不改前端即可把旧域名请求指到新服务；服务迁移未完成时可用 Mock 先验页面。附接口联调 Demo。",{"slug":69,"title":70,"summary":71,"date":72,"featured":8,"seoDescription":73,"series":27,"seriesOrder":61},"api-param-encryption-debug","H5 接口参数加密？DevPeek 一键解密调试","联调时接口参数 AES 加密看不到明文？用 DevPeek 参数转换功能，填好密钥和 IV 就能自动解密，还能改参重放。","2026-07-18","用 DevPeek 参数转换功能解密 AES-GCM 加密的 H5 API 请求，支持双向转换、明文编辑、调试重放。",{"slug":75,"title":76,"summary":77,"date":78,"featured":79,"seoDescription":80,"series":81,"seriesOrder":54},"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":83,"title":84,"summary":85,"date":86,"featured":79,"seoDescription":87,"series":81,"seriesOrder":61},"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":89,"title":90,"summary":91,"date":92,"featured":79,"seoDescription":93,"series":94,"seriesOrder":54},"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":96,"title":97,"summary":98,"date":99,"featured":79,"seoDescription":100,"series":94,"seriesOrder":61},"why-we-built-devpeek","我们为什么做 DevPeek（一）：HTTPS 解密了，Body 还是天书","版本日前那晚，TLS 早就解开了，改请求里一个字段却还要翻脚本加解密。于是萌生做一个把业务加解密收进代理的工具——DevPeek 从这儿开始。","2026-07-09","DevPeek 起源系列第一篇：联调时请求体加解密的手工折腾，以及为什么先做一款把业务加解密收进代理的工具。",1789537095372]