ProxyPin Flutter 应用调试全流程从连接到分析

完整流程概览

1. 安装 ProxyPin（桌面 + 移动）
      ↓
2. 桌面端安装 HTTPS 根证书
      ↓
3. 手机扫码连接电脑
      ↓
4. 打开 Flutter App，开始操作
      ↓
5. ProxyPin 自动捕获流量
      ↓
6. 查看 / 搜索 / 重写 / 导出

第一步：桌面端准备

[桌面端]
  安装 → 启动 → 「证书」→「安装证书」→ 系统级信任
  「二维码」→ 生成扫码连接二维码

确认：桌面端 IP 和端口正常显示，HTTPS 代理已开启，二维码能扫描。

第二步：移动端连接

[移动端 - Flutter App 所在的设备]
  安装 ProxyPin → 授权 VPN
  打开 ProxyPin → 扫码连接桌面端
  等待「已连接」提示

重要：移动端需要安装对应平台的 HTTPS 证书并信任：

Android：用户证书（7.0+ 可能需要系统证书）
iOS：安装配置文件 + 手动信任根证书

第三步：打开 Flutter App

直接打开目标 Flutter App，正常使用。ProxyPin 会自动拦截流量——不需要对 Flutter App 做任何额外配置（这正是 ProxyPin 的 Flutter 原生支持优势）。

第四步：在 ProxyPin 中操作

定位请求

Flutter App 的请求一般集中在特定域名。先用域名过滤把目标域名加进白名单：

域名过滤白名单：
api.myapp.com
static.myapp.com
cdn.myapp.com

查看响应

点击请求 → 查看「响应体」Tab：

JSON 自动格式化
如果看到加密内容 → 配置 AES 请求解密
如果看到压缩内容 → ProxyPin 自动解压

修改请求（调试用）

需要改请求试一下：

「请求重写」→ 添加规则
  URL 匹配：api.myapp.com/user/profile
  类型：响应体替换
  内容：{"code":200,"data":{"vip":true,"balance":99999}}

刷新 Flutter App 的个人页面，看是否显示为 VIP 用户。

JS 脚本动态处理

更灵活的方式：

// onResponse
function onResponse(context, response) {
  if (response.url.includes('/user/profile')) {
    let data = JSON.parse(response.body);
    data.data.vip = true;
    data.data.balance = 99999;
    response.body = JSON.stringify(data);
  }
  return response;
}

导出 HAR 分享

需要跟后端或同事讨论问题时：

在请求列表中选中相关请求
右键 / 长按 → 导出 HAR
发给对方，对方可以用 Chrome DevTools 打开分析

常见问题排查

问题一：请求列表空的

排查顺序：

桌面端代理有没有启动？
HTTPS 代理有没有开启？
手机是不是和电脑在同一网络？
扫码连接有没有显示成功？
域名过滤规则是不是把所有域名都挡了？（临时关闭过滤验证）

问题二：HTTP 看得到，HTTPS 看不到