Charles 是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。
基础设置
- 将 Charles 设置成系统代理
- 过滤网络请求
- 截取 iPhone 上的网络封包
- 截取 Https 通讯信息
进阶使用
网络环境模拟
菜单路径:Proxy
👉 Throttling Settings
断点
- 菜单路径:
Proxy
👉Breakpoint Settings
- 勾选
Enable Breakpoints
- 点击
Add
根据需求设置断点
- Scheme:请求类型,GET 或 POST,不选为都应用
- Protocol:协议,http 或 https,不选未都应用
- Host:主机头(域名),如 www.domain.com
- Port:端口,一般 http 为 80,https 为 443
- Path:路径,如 /user/signin
- Query:查询参数
调试场景:想查看一个 POST 请求提交的数据,又不想提交入库,可以添加一个断点,断点编辑界面中设置好服务器相关信息,并勾选 Request,发送 POST 的请求的时候就会进入到断点,以查看相关细节。
远程文件映射
菜单路径:Tools
👉 Map Remote
上图所示的设置,将图片 A:
1 | https://t.alipayobjects.com/images/T11rdgXbFkXXXXXXXX.png |
映射到了图片 B:
1 | https://zos.alipayobjects.com/rmsportal/SfloiOYKvVYWZWq.png |
也就是说,请求图片 A 时,返回的是图片 B。
本地文件映射
菜单路径:Tools
👉 Map Local
Map From
设置好线上文件 A 的相关信息,Map To
里选择本地磁盘上的版本,请求文件 A 时,就会返回指定的本地磁盘上的文件,比如可以映射线上的 CSS 或 JS 到本地修改过的版本,以验证问题是否修复。
重定向
菜单路径:Tools
👉 Rewrite
什么时候会用到重定向功能?
一般是不能控制输入的 URL,但想返回特定服务器上的内容,比如配置在第三方服务上的 URL 是不能随便修改的,但又想验证测试服务器上的版本集成时是否有问题,就可以使用重定向功能进行调试。
上面所示的设置,重定向 Type
里选了 Host
,将 render.alipay.com
重定向到 render.test.alipay.net
,访问:
1 | https://render.alipay.com/p/f/antui/demo.html |
时会返回
1 | https://render.test.alipay.net/p/f/antui/demo.html |
DNS 欺骗
菜单路径:Tools
-> DNS Spoofing
相当于设置 hosts
文件,把域名解析到指定的 IP。
相关链接
Better Mobile Application Testing with Charles Proxy
Charles 从入门到精通