我们为什么做 DevPeek（二）：App 里那页 H5，在电脑上也能对着查
登录修好了，活动页又红了
上一篇里，预发登录靠 参数转换 把密文 Body 收成「改个字、点发送」。测试确认能登了，群里刚松口气，产品又丢过来一条：
「活动页有个按钮在 Android 上点不动，iOS 正常，帮看下？」
不是接口挂了。抓包里 GET /api/activity/config 是 200，Mock 也试过——数据没问题。问题出在 App 里嵌的那页 H5：同一个 URL，Chrome 里开响应式模式看着正常，真机 WebView 里按钮区域被底部安全区盖住了一截，点不到。
这类 bug 我们熟：只在 App 内 WebView 或某款机型上才冒头，桌面浏览器怎么缩放都对不上。
真机里硬啃，窗口永远对不齐
我的第一反应还是老路子。
Remote debug：Android 开 WebView 调试、USB 连上，chrome://inspect 里找页面。有时列表里根本没有——得找客户端同学开 debug 包，或者确认是不是 X5 内核。iOS 更绕：Safari 开发菜单、证书、Web Inspector 一套下来，页面一刷新连接就断。
vConsole / eruda：能在页面上看 log，但要改 H5 代码或走代理注入，而且 DOM 树小屏上划来划去，跟设计稿对像素很费眼。
抓包工具：Charles 里能看见 H5 发的 XHR，Request/Response 也解得开——可 Network 是一扇窗，DOM 和 Console 是另一扇。你在列表里对上了 POST /api/xxx 返回 500，还得切回手机上看是哪块 UI 触发的；Console 里报的 TypeError 跟抓包列表对时间戳，人肉对齐。
测试把录屏发群里：「就点这个红色按钮，没反应。」
我盯着六寸屏上的 H5，另一台显示器开着抓包列表，第三屏试着挂 remote debug——三个窗口，没有一个能同时告诉我 「页面上这个节点」 和 「它刚发的请求」 是不是同一条链路。
抓包能看见 H5 的请求，但 DOM 和 Console 还在另一头。
卡住的从来不是「看不见流量」
代理和 SSL 那关，第一篇已经啃过了。H5 联调里更磨人的是：流量看得见，页面上下文在另一头。
桌面 responsive 换的是 viewport，跑的还是桌面 Chrome——不是 App 里的 WebView。Remote debug 连上时很准，但 USB 连不上、没有 debug 包、X5 内核或 iOS Web Inspector 一刷新就断，排查还是卡在小屏上。
DevPeek 走的是另一条路：经代理注入调试脚本，在真机页面自己的 JS 环境里查 DOM、Console；Network 跟抓包列表同源，Mock 也在同一条链路上——改响应、模拟错误码，页面里点按钮触发的请求走的就是你 Mock 过的结果，不必为了验 UI 再切工具。
我们图的不是「比 DevTools 仿真更全」。注入受 CSP、可注入 HTML 等限制；镜像是 rrweb 回放，不是把 GPU 渲染流推过来；软键盘、原生壳层、JSBridge 也管不到。图的是方便——大屏对着查、页面和网络（含 Mock）一体——以及 remote debug 连不上时仍能继续排查。
镜像到调试 Tab，用自研面板对着查
参数转换解决的是 Body 密文；H5 这类问题，DevPeek 收进来的是 页面本身——也就是现在的 移动端网页调试（主窗口 调试 Tab）。
前提跟抓包一样：手机走 DevPeek 代理、信任根证书、目标域名在 SSL 解密范围 里。详见 移动端网页调试 文档里的清单；缺任何一项，预览区会一直停在「等待设备连接」。
条件满足后，流程很直：
- 切到 调试 Tab，顶部 客户端 Tab 选中测试那台 Android（与抓包页共用，同一设备只对应一个 Tab）。
- 在 App 里 重新打开或刷新 那页 H5。代理在 HTML 响应里注入调试脚本，页面通过 WebSocket 连回 DevPeek，左侧预览区 实时镜像 手机上的 DOM 与交互（基于 rrweb 录制回放，不是把整页视频推过来）。
- 下方是 自研调试面板——不是把 Chrome DevTools 嵌进来，而是按「代理镜像」场景自己搭的分区。
Elements（DOM）：右侧树形结构跟左侧镜像同源。可以开选取模式，在镜像画面上点节点，树里高亮对应条目；改样式、改 DOM 的操作 下发到真机，镜像随 rrweb 事件更新——你在电脑上看，改的是手机里的页面。
Console：目标页 console.log、报错会推到面板里，并按页面会话过滤，避免切 Tab 后旧页日志串线。面板里也能输入表达式，在 实机页面上下文 里 eval——跟 remote debug 的控制台类似，但不用先搞定 chrome://inspect。
Network：列出镜像页发出的请求，数据源与 抓包列表 一致——同一条代理转发、同一套 参数转换 与 Mock 规则。接口 Body 仍是密文时，详情里照样能看到解密后的字段；在 Mock 里改了活动接口的返回，Network 里能看到页面收到的是篡改后的响应；要改参重发，切回抓包 Tab 对同一行开「调试 API」即可，不必复制到 Postman。
三块面板加上方工具栏（后退 / 前进 / 重载、URL 跳转、弱网 Throttling），构成「对着镜像查」的闭环。边界细节见 移动端网页调试 文档——能注入、能镜像时用；对不上时在真机侧再验一轮。
切回抓包 Tab，对同一行开调试 API——改字段、重发，不必离开代理链路。
和 Map Route、Mock 搭着用
H5 联调还常遇到：页面脚本写死了 https://api.example.com，本地服务跑在 127.0.0.1:8080；或者后端还没部署，你想先看错误码下 UI 长什么样。
改 H5 发版不现实时，Map Route（路由映射） 把 Host 指到本机 stub，Mock 直接改响应体或状态码——都在代理链路上，WebView 里 URL 不用改。Mock 篡改弹窗不受客户端 Tab 或主窗口页签限制：你在调试 Tab 对着镜像点按钮，命中规则时照样会弹出篡改界面；Network 里看到的与抓包列表是同一数据源。调试 Tab 镜像的仍是 App 里那页；你在镜像里点按钮，验的就是这条链路上的真实效果，不用为了对 DOM 再开 Charles 或 Postman。
同一条代理链路——镜像里点按钮触发请求，响应阶段在弹窗里改完继续，页面立刻收到篡改结果。
那页活动按钮
回到开头那个按钮：镜像里用 Elements 选取模式点了一下，发现外层 div 的 padding-bottom 在 Android WebView 里被算短了一截——桌面 responsive 模式没复现，remote debug 那回还没连上。
Console 里补了一行 getComputedStyle 对比，Network 里确认点击后 POST /api/activity/join 根本没发出去——不是接口错，是 hit area 被挡了。改完样式下发到真机，测试在镜像上看着点了一轮，再回 App 里验收，不用我抱着手机蹲工位。
下一篇
《我们为什么做 DevPeek（三）：不改 H5 域名，把 API 指到本机》——Map Route 与 Mock 怎么跟抓包、页面调试串成一条联调链，预发环境没部署也能验错误码。
若你也在 App WebView 里对着小屏硬啃 H5，欢迎 下载 DevPeek 试用，或到 GitHub Discussions 聊聊——上手步骤见 移动端网页调试，代理与证书见 代理与 SSL 证书。