移动端 H5 开发常用的抓包与替换调试工具实践
在移动端 Web 开发中，虽然大多数功能可以在 PC 端 Chrome 开发者工具中通过移动端模拟器调试，但仍存在一些关键场景无法在 PC 环境中完整复现，必须依赖真实移动设备进行调试：
📱 常见移动端开发调试难点
微信 / QQ 内嵌页授权问题
- 在手机端打开的 H5 页面通常需要复用 App（微信或 QQ）的登录态。
- PC 模拟器无法模拟微信 / QQ 内嵌浏览器，也无法获取授权跳转后的 token。
App 投放页面调试
- 页面将嵌入其他 App 内（如视频类 App、新闻类 App），这些 App 可能没有测试环境或调试入口。
- 需要开发阶段将入口页面替换为测试版本进行验证。
线上 JS 脚本调试
- 移动端 JS 库偶发异常（如动画或触控兼容性），但线上文件无法直接修改，需通过替换机制调试。
因此，抓包、替换和本地调试工具就显得尤为重要。
🪟 Windows 下推荐工具：Fiddler + Willow
官网： https://www.telerik.com/fiddler
功能：
- HTTP/HTTPS 抓包
- 请求修改与重放
- 插件支持，如 Willow 实现页面替换 / Hosts 设置
插件推荐： Willow
优点：
- 免费
- 图形化界面
- 使用简单直观
🍎 macOS 用户推荐工具：Whistle + HBuilderX + AnyProxy
Charles 曾是 mac 抓包首选，但目前已转为收费产品，免费替代品更具性价比。
🐧 跨平台工具推荐（Linux / macOS / Windows 通用）
✅ Reqable（推荐）
特点：
- 免费、界面现代、支持抓包、重放、替换规则等
- 类似 Postman + Charles 的集合体
- 支持二维码连接移动端
✅ nproxy + Wireshark（命令行玩家推荐）
安装 nproxy（Node.js 环境）
npm install -g nproxy
使用模板文件修改规则
cp /usr/lib/node_modules/nproxy/replace-rule.sample.js ./
# 修改 replace-rule.sample.js 来定义请求拦截与响应替换逻辑
启动 nproxy
nproxy -p 8888 -l replace-rule.sample.js -d
控制台提示：
[INFO] NProxy started on 8888!
[INFO] connect to https server successfully!
设置手机代理
- 手机和电脑连接同一 Wi-Fi 网络
- 手机设置代理为电脑 IP 和端口（如 8888）
使用 Wireshark 抓包分析
- 需结合 HTTPS 证书安装或使用 HTTP 协议分析响应
📲 手机代理调试的实用建议
- Android 可用“微信开发版”调试 WebView 页
- iOS 可用 macOS + Safari 开启 Web 远程调试
- Wi-Fi 网络需在同一网段，防火墙放行端口
- 避免运营商劫持 HTTPS，使用可信证书或 HTTP
📁 推荐调试配置目录结构
debug-env/
├── replace-rule.sample.js
├── certs/
│ └── nproxy-rootCA.crt
├── logs/
└── README.md
✅ 总结推荐工具对比
| 工具 | 支持平台 | 特点 | 建议用途 |
|---|---|---|---|
| Fiddler | Windows | 免费 + 插件丰富 | Windows 下首选 |
| Willow | Windows 插件 | 页面替换 + HOSTS 配置 | 配合 Fiddler 替换测试页 |
| Charles | macOS / Win | 可视化抓包（需付费） | 图形用户喜欢 |
| Whistle | 通用 | 强大规则与流量管理 | 重写规则场景推荐 |
| Reqable | 通用 | 现代 UI + 抓包替换 | 跨平台最佳选择 |
| nproxy | 通用 | 命令行 + 替换灵活 | 工程化开发流程适合 |