Charles使用详解

image.png

1. Charles主要功能：

• 支持SSL代理。可以截取分析SSL的请求。
• 支持流量控制。可以模拟慢速网络以及等待时间（latency）较长的请求。
• 支持AJAX调试。可以自动将json或xml数据格式化，方便查看。
• 支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化，方便查看。
• 支持重发网络请求，方便后端调试。
• 支持修改网络请求参数。
• 支持网络请求的截获并动态修改。
• 检查HTML，CSS和RSS内容是否符合W3C标准。

2. Charles安装

Charles官方安装地址：

• https://www.charlesproxy.com/download/

Charles v4.1.4破解文件下载:

• 链接: https://pan.baidu.com/s/1sl5AeTJ密码: cp7z
  注：将文件名改为：charles.jar

破解步骤：

• Windows 平台,将下载的charles.jar文件覆盖到安装目录下的lib文件夹下即可完成破解!
• Mac 平台,将下载的charles.jar文件右键 Charles.app 显示包内容,覆盖到Content->Java下即可完成破解!

3. HTTP抓包

（1）查看电脑IP地址

img

（2）设置手机HTTP代理

手机连上电脑，点击“设置->无线局域网->连接的WiFi”，设置HTTP代理：
服务器为电脑IP地址：如192.168.1.169
端口：8888

img

设置代理后，需要在电脑上打开Charles才能上网

（3）电脑上打开Charles进行HTTP抓包

手机上打开某个App或者浏览器什么的，如果不能上网，检查前面步骤是否正确

img

点击“Allow”允许，出现手机的HTTP请求列表

4. HTTPS抓包

HTTPS的抓包需要在HTTP抓包基础上再进行设置

设置前抓包HTTPS是这样的

img

设置后抓包HTTPS长这样

img

img

以下为在HTTP抓包基础上进行HTTP抓包的进一步设置步骤:

（1）安装SSL证书到手机设备

点击 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device

img

出现弹窗得到地址 chls.pro/ssl

手机安装SSL证书的地址

在手机Safari浏览器输入地址 chls.pro/ssl，出现证书安装页面，点击安装
手机设置有密码的输入密码进行安装

安装证书

• 注意1：有兄弟姐妹说Safari浏览器输入这个网址chls.pro/ssl安装不了证书的情况,
  亲测要(1)设置好手机HTTP代理 (2)电脑上Charles要开着
• 注意2：iOS 10.3系统，需要在 设置→通用→关于本机→证书信任设置 里面启用完全信任Charles证书
  （这里感谢@13002171223的提出这点 ，之前没升级10.3哈）

（2）Charles设置Proxy

Proxy -> SSL Proxying Settings...

img

勾选Enable SSL Proxying,点击Add

img

Host设置要抓取的https接口，我们一般填*，表示所有

image.png

（3）进行HTTPS抓包

让手机重新发送https请求，可看到抓包
注意：不抓包请关闭手机HTTP代理，否则断开与电脑连接后会连不上网

5. 过滤

在 Charles 的菜单栏选择 Proxy->Recording Settings，然后选择 Include 栏，选择Add，然后填入需要监控的协议，主机地址，端口号,这样就达到了过滤的目的。如下图：

img

还有一种方法就是在一个网址上右击，选择Focus，然后其他的请求就会被放到一个叫Other Host的文件夹里面，这样也达到了过滤的目的。

img

6. 断点

断点的功能搞开发不会不知道，在Charles发起一个请求的时候，我们是可以给某个请求打一个断点的，然后来观察或者修改请求或者返回的内容，但是在这过程中药注意请求的超时时间问题。要针对某一个请求设置断点，只需要在这个请求网址右击选择Breakpoints就可以断点某一个请求了。

img

7. 模拟网速慢

有时候在开发的时候我们想要模拟一下网络慢的情况，这时候Charles他是可以帮助到你的，在Proxy->Throttle Setting，然后选择Enable Throttling，在Throttle Preset下选择网络类型即可，具体设置你可以自行拿捏。

img

8. 请求重定向

请求重定向的作用是什么呢？开发中一般都是测试环境，如果我们想对比一下和线上版本的区别的话，可以讲测试的请求重定向到正式环境下。在选择 Tools->`Map Remote下：

img

9.内容替换

有时候我们会测一下请求的参数不同会带来不同的返回结果以测试是否达到业务需求，或者需要不同的返回结果来验证我们对数据的处理是否正确，这时候需要后台的同事配合，但是有了Charles，我们可以自己把控接口返回来的内容，比如数据的空与否，数据的长短等等。在Tools->Rewrite Settings下：

img