2026/1/27大约 3 分钟
一、序言
在实际开发和调试过程中，无论是 微信小程序 还是 移动端 APP，前端与后端之间都通过接口进行数据交互。然而在很多场景下，我们并不能直观地看到后端接口的真实返回内容，例如：
- 接口返回数据异常，但前端日志有限
- 某些问题只在真机或特定网络环境下出现
- 小程序或 App 内部请求无法通过浏览器 DevTools 直接查看
当出现这类问题时，仅依靠前端代码和控制台日志，往往很难快速、准确地定位问题根因。
因此，引入 网络抓包工具 就显得尤为重要。通过抓包，我们可以直接查看客户端与后端之间的真实 HTTP / HTTPS 请求与响应，包括请求地址、参数、返回数据、状态码等关键信息。
Charles 是一款常用且功能强大的抓包工具。通过在本地电脑上安装 Charles，并对手机端进行相应配置，我们可以轻松抓取微信小程序或 App 的后端接口请求，从而大幅提升问题定位和排查效率。
二、具体执行步骤
1. 安装 Charles
- 前往 Charles 官方网站下载客户端（macOS / Windows 均支持）
- 根据操作系统完成安装
- 启动 Charles，确保程序正常运行
安装完成后，Charles 会在本地启动一个代理服务，用于拦截并展示网络请求。
2. 手机端安装证书（重要）
由于当前接口大多使用 HTTPS 协议，如果手机端未安装并信任 Charles 的证书，抓包时会出现以下问题：
- 请求内容显示为乱码
- 无法查看具体请求参数和返回数据
无证书时显示乱码：
操作步骤：
- 确保手机已连接到与电脑相同的 WiFi
- 在手机浏览器中访问：
http://chls.pro/ssl- 下载并安装 Charles 证书
- 在手机系统设置中 信任该证书
- iOS：设置 → 通用 → 关于本机 → 证书信任设置
- Android：根据系统版本在安全或证书管理中进行信任配置
完成证书安装并信任后，Charles 才能正确解析 HTTPS 请求内容。
3. 手机与电脑连接到同一 WiFi
抓包的前提是：手机的网络流量必须经过电脑上的 Charles 代理。
- 确保手机与电脑连接到同一个 WiFi 网络
- 在手机 WiFi 设置中，配置代理：
- 代理类型：手动
- 代理服务器：电脑的局域网 IP
- 端口：Charles 默认端口（一般为
8888）
- 保存设置后，手机的网络请求将通过 Charles 转发
4. 抓包成功验证
完成以上步骤后，可以进行验证：
- 打开微信小程序或 App
- 执行相关操作（触发接口请求）
- 在 Charles 界面中查看是否出现对应的网络请求
- 点击请求，检查：
- Request：请求地址、参数、Header
- Response：返回数据、状态码
若请求与响应内容均能正常显示，说明 抓包配置成功。
三、总结
通过引入 Charles，我们可以在微信小程序和 App 场景下，直观地查看真实的后端接口请求与返回结果。这对于：
- 定位接口数据问题
- 排查线上或真机问题
- 分析请求参数和返回结构
都具有非常重要的价值，是前端与移动端开发过程中不可或缺的调试工具之一。