移动端网页调试
页面调试用于在电脑上镜像经 DevPeek 代理访问的手机网页，并用自研调试面板排查（不是浏览器 DevTools）。使用前须：终端接入代理、信任 DevPeek 根证书、目标域名在 SSL 解密范围 内——否则预览区可能一直显示「等待设备连接」，无法完成镜像。电脑上的 Chromium 类浏览器扩展可作为 PC 浏览器补充；录制与时间轴回放为可选能力。
演示
移动端网页经代理调试
演示手机经代理访问、SSL 配置就绪后，在调试 Tab 选中客户端 Tab、刷新页面自动连接并镜像，使用 DevPeek 自研调试面板。
使用前请先确认
移动端网页调试依赖完整代理链路，不能脱离抓包单独使用。建议按下面清单逐项核对后再进入调试 Tab：
- 手机 / 平板 Wi‑Fi（或测试环境）HTTP(S) 代理指向运行 DevPeek 的电脑 IP 与监听端口；电脑与手机在同一局域网且端口可达。
- 在移动端安装 DevPeek 根 CA 并完全信任（iOS 除安装描述文件外，还须在「设置 → 通用 → 关于本机 → 证书信任设置」中启用；Android 须安装为用户 CA 并注意 App 是否信任用户证书）。
- 在 DevPeek 的 SSL 配置中把目标站点加入解密白名单；抓包页应能看到该域名的 HTTPS 明文与 HTML 页面，而不是只有无法解密的隧道行。
详细步骤见代理与 HTTPS / 证书与抓包界面与请求章节。
进入调试视图
上述条件满足后，切到调试 Tab，并在顶部客户端 Tab选中要调试的手机客户端（与抓包页共用同一组 Tab）。若尚无该设备的 Tab，请先在手机上经代理打开目标网页，确认抓包页已有该客户端流量后再切换。
在手机浏览器中刷新当前页面（或重新打开目标 URL）；若该页是可注入的经代理拿到的 HTML 文档响应，DevPeek 会自动建立连接并在预览区镜像。连接前预览区会显示「等待设备连接」。CSP（内容安全策略）会限制可被注入的资源与行为，镜像与真机浏览器可能略有差异——这是预期的安全边界。
连接成功后，左侧为实机页面镜像，下方为自研调试面板（Elements、Console、Network 等）。
工具面板
- 工具栏提供后退、前进、重新加载；URL 栏可填入地址并按 Enter 在实机浏览器中跳转到其他页面（需已连接设备）。只读「尺寸」展示实机页面视口宽高。
- Throttling（限速）：可选择内置预设或使用与全局弱网一致的自定义参数。
- 切换顶部客户端 Tab可改绑其他客户端。
- 下方为 DevPeek 自研调试面板：Elements（DOM）、Console、Network、Session（Cookies / localStorage / sessionStorage / IndexedDB 等）等分区一体集成，专为代理镜像场景设计。
Console 分区可查看页面日志，并在实机页面上下文中远程执行脚本（支持补全）。
Network 面板与原地调试 API
调试面板 **Network** 分区列出镜像页面发出的请求（与抓包列表一致），可查看请求头、正文、响应与参数转换结果。
需要改参重发时，**不必**把 Query / Body 复制到 Postman 等工具：切回抓包 Tab，在同一客户端下选中对应请求，点详情右上角调试或列表右键打开「调试 API」抽屉，在明文区改参后发送即可（DevPeek 自动加密）。详见抓包界面与请求与参数转换。
选中 Network 列表中的请求，可在详情区查看 Headers、Body、Response 等——与抓包列表同源。
录制调试会话
预览区提供录制入口。若在录制过程中切换所选客户端、离开调试路由或终止调试而未保存，未提交的录制可能被丢弃并有提示。成功保存的会话会写入主窗口右侧「历史记录」侧栏中的调试录制列表。
录制回放（预览能力）
在主窗口调试视图下，可关注右侧竖条历史记录：其中列出已保存的调试录制。对某条目可导出为 JSON，或删除，或发送给局域网伙伴（参见协作一章）；点击重现可在新开窗口中尝试回放。若界面提供「导入录制 JSON」入口，也可用文件导入会话。该能力仍在迭代，排查问题时不依赖回放也能完成大部分工作。
底部支持导入录制 JSON：校验格式失败或文件不可读时会给出细分错误文案；若会话缺少可镜像事件，则可能无法播放时间轴画面。
回放工具栏提供播放 / 暂停，以及预览 / 编辑视图模式切换；可通过键盘微调进度焦点（无障碍提示以界面为准）。
电脑浏览器扩展采集（Chromium）
当你在 PC 上使用 Chrome、Microsoft Edge 等 Chromium 内核 浏览器时，可同时安装 DevPeek「浏览器扩展」（各应用商店显示名称可能因渠道略有差异，由安装介质或发行方一并提供）。它用于在当前网页标签页里采集操作与会话轨迹，采样策略与桌面端注入调试侧的录制对齐，适合做「不走系统代理也能录一段前台页面」的补充场景。
- 点击浏览器工具栏上的扩展图标打开弹出页：开始录制本标签 / 停止本标签录制；支持多个标签并行录制，弹出页会提示并行路数。
- 与桌面 DevPeek 连接：停止录制后，扩展会通过本机的协作 HTTP 接口把数据交给桌面应用（与同机「导入」调试录制走同一通路）。使用前请先启动本机 DevPeek，以便顺利完成上传。
- 端口与离线：扩展会自动探测本机 DevPeek 的协作服务端口（在一段连续端口范围内尝试）；若你在桌面 DevPeek 里改过协作监听端口且自动探测失败，可在扩展弹出页填写「协作 HTTP 端口」以便对齐。桌面端暂时不可用时仍可先录制，数据会暂存在扩展自带的本地空间里，之后在 DevPeek 已启动时再自动补传；也可用弹出页链接进入「暂存录制管理」，手动同步、导出或删除条目。
- 请勿在浏览器内置页（如以
chrome://开头的地址）上发起录制——这类页面扩展脚本无法正常工作。 - 成功导入桌面端后，会话会出现在历史记录侧的调试会话列表里，可按与其它录制相同的方式进行回放、导出或协作发送（以当前版本界面为准）。
页面调试仅适用于经 DevPeek 代理且 SSL 配置正确的移动端（或经代理的其它终端）网页；预览受站点 CSP 约束。录制文件若含 Token 等敏感信息，请勿通过公共信道分享。