前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Charles 抓包 iOS 真机 HTTPS 全流程实战从代理到证书信任一次讲透

首页
2026-07-07 21:55:12
Front-End
CharlesiOS抓包HTTPS网络调试调试技巧

做移动端开发或者接口联调,迟早会遇到这么一类问题:App 里某个请求返回不对,后端说「我这边没问题」,前端说「我参数传对了」,两边互相甩锅。这时候最有力的证据就是把真机上那条请求的完整报文(URL、Header、Body、Response)原原本本抓出来。Charles 就是干这个的老牌工具,但真正卡住大多数人的从来不是抓 HTTP,而是 iOS 真机 + HTTPS 明文 这一段——代理连不上、证书装了却是灰的、抓下来全是乱码。

我最近在 Mac 上用 Charles 5.1 抓一台 iPhone 真机的 HTTPS 流量(演示里抓的是 chatgpt.com 的 backend-api),把整条链路从头到尾又踩了一遍,顺手把每一步都截了图。这篇文章就以这套截图为线索,把 Charles 端配置 + iPhone 端配置 + 证书信任 三段拆开讲清楚,让你照着做一次就能通,而不是对着一堆「装了证书还是抓不到」的帖子干瞪眼。

在本篇文章中,我们将从浅入深,一起把下面这些环节走通:

  • 为什么抓包第一件事是关掉 VPN,不然全流程都白搭
  • Charles 端怎么确认代理端口、打开 HTTP/2 与透明代理
  • Help → SSL Proxying 里那个「安装到移动设备」入口到底给了你什么信息
  • iPhone 怎么把 Wi-Fi 代理指向 Mac,再用 chls.pro/ssl 下载证书
  • 描述文件安装 + 关于本机里的「证书信任设置」 这一步为什么最容易被漏
  • 抓到明文后 SSL Proxying 白名单怎么配,以及连不上/证书灰/乱码的排查清单

# 一、动手前的三个前提

真机抓包本质上是「让手机的所有流量先绕道到你电脑上的 Charles,再由 Charles 转发出去」。要让这条路走通,开工前先确认三件事,否则后面每一步都可能莫名其妙失败:

  • 手机和电脑连的是同一个 Wi-Fi(同一网段),这是代理能互通的物理前提。
  • 关闭手机上的 VPN / 加速器 / 科学上网工具。这是最高频的坑:VPN 会把流量从另一条隧道送出去,直接绕过你设置的 HTTP 代理,结果就是 Charles 里一条请求都不出现。记住一句话——抓包必须关闭 VPN。
  • 电脑防火墙放行 Charles。macOS 首次运行会弹窗询问是否允许接入网络连接,选允许即可。

这三点看着简单,但「明明配好了却抓不到包」的案例里,八成以上都栽在 VPN 没关或者不在同一 Wi-Fi 上。

# 二、Charles 端确认代理端口

先看 Charles 这一侧。打开 Charles,进入 Proxy → Proxy Settings,核对 HTTP Proxy 的监听端口——默认是 8888,这个端口号待会要原样填到 iPhone 的 Wi-Fi 代理里,两边必须一致。

Charles 的 Proxy Settings 面板,HTTP Proxy 端口为 8888,勾选了 Support HTTP/2 和 Enable transparent HTTP proxying

这里有两个勾选项值得留意:

  • Support HTTP/2:现在绝大多数线上接口都走 HTTP/2(甚至 HTTP/3),不勾这个,很多请求会抓不全或被降级,务必打开。
  • Enable transparent HTTP proxying:透明代理,配合真机抓包更稳,建议保持勾选。

SOCKS Proxy 这一栏真机抓包用不到,保持默认不启用即可。端口确认完点 Done,Charles 端的「入口」就算开好了。

# 三、从 Help 菜单拿到移动端安装入口

端口有了,接下来要解决 HTTPS 明文的核心——证书。HTTPS 是加密的,Charles 想看到明文,本质是做一次「中间人」:它用自己的根证书重新签发目标站点的证书,手机得先信任这张 Charles 根证书,加密流量才能被解开。

Charles 很贴心地把移动端的安装指引集中在了一个入口:顶部菜单 Help → SSL Proxying → Install Charles Root Certificate on a Mobile Device or Remote Browser。

Charles 的 Help - SSL Proxying 菜单展开,红框标注 Install Charles Root Certificate on a Mobile Device or Remote Browser,弹窗提示把设备代理配置为 192.168.5.136:8888 后浏览 chls.pro/ssl 下载证书

点进去弹出的提示框,把接下来两步要用的关键信息一次性告诉了你:

Configure your device to use Charles as its HTTP proxy on 192.168.5.136:8888, then browse to chls.pro/ssl to download and install the certificate.

翻译成人话就是:

  1. 把手机的 HTTP 代理设成 Charles 所在电脑的局域网 IP 加端口(这里是 192.168.5.136:8888,你的 IP 换成自己 Mac 的即可,可在 Help → Local IP Addresses 查到)。
  2. 代理配好之后,用手机浏览器打开 chls.pro/ssl 这个特殊域名下载证书。

弹窗还特意提醒了一句:iOS 10 及以后,装完证书还要去 设置 → 通用 → 关于本机 → 证书信任设置 里手动把 Charles 证书启用为受信任——这正是第七节要讲、也是最多人漏掉的一步。

# 四、iPhone 端把 Wi-Fi 代理指向 Mac

回到 iPhone。进入 设置 → 无线局域网,点你当前连接的这个 Wi-Fi 名字右侧的 ⓘ,进入这个网络的详情页,一直往下滑,最底部 HTTP 代理 分组里有一项 配置代理,默认是 关闭

fe
  • 一、动手前的三个前提
  • 二、Charles 端确认代理端口
  • 三、从 Help 菜单拿到移动端安装入口
  • 四、iPhone 端把 Wi-Fi 代理指向 Mac
  • 五、用 chls.pro/ssl 下载证书
  • 六、在设置里安装描述文件
  • 七、关于本机里开启证书信任(最容易漏的一步)
  • 八、回到 Charles 看明文与 SSL Proxying 白名单
  • 九、常见问题排查清单
  • 十、总结
  • 参考

真机调试 WebView 看不到 iOS Safari 与 Android Chrome 远程调试完整指南 →