一、前言

Charles

Charles是一个Web代理服务器（HTTP代理 / HTTP监视器），是一个常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。

Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

Charles的主要功能包括：

• SSL代理
• 流量控制：可以模拟慢速网络以及等待时间（latency）较长的请求
• AJAX调试：可以自动将json或xml数据格式化
• AMF
• 重发网络请求，方便后端调试
• 支持修改网络请求参数
• 可设置断点来拦截请求和响应数据
• 检查HTML，CSS和RSS内容是否符合W3C标准

本文主要介绍在移动开发中常用的几个功能，希望能对移动开发人员有一定的帮助。

二、安装和激活

Charles是收费软件，可以免费试用30天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过30分钟，并且启动时将会有10秒种的延时。

不差钱的小主儿可直接到Charles官网下载相应操作系统版本，并根据需求在这里购买相应的License。

但我相信，更多的小主儿还是觉得在天朝这个神奇的国度，免费才是王道。

• Mac版可上Xclient下载，里面的软件一般会有多个版本，更重要的是，都会有激活方法，实在是良心网站啊～
• 至于Windows版的话，百度谷歌搜索一下，或者官网下载之后，网上搜下注册码，相信在天朝生活了几十年的各位小主儿混得比我还开。

三、Charles主界面介绍

Charles主界面介绍

1. 两种视图模式

Charles 主要提供两种查看封包的视图，分别名为Structure和Sequence。

• Structure： 视图将网络请求按访问的域名分类。
• Sequence： 视图将网络请求按访问的时间排序。

2. 过滤关键字

一般我们可以直接在Filter栏中输入需要的关键字，来筛选出关注的网络请求，比如我们的服务器地址是：www.youraddress.com，那我们就可以直接在Filter栏中输入：youraddress来过滤。

3. 请求内容和响应内容

在界面下方，还可以看到本次请求的概述（Overview）、请求内容（Request）、响应内容（Response）等一系列信息：

• 概述：包含了URL、请求状态、请求时间、请求数据大小、响应数据大小等信息

概述

• 请求内容：包含了请求头信息（请求方式、URL、协议、User-Agent、Host等信息）

请求内容

• 响应内容：包含了请求头、响应数据包内容等信息，而响应数据又可以按原格式、Json格式、Json Text格式进行显示，如果响应内容是图片，Charles还可以显示出图片的预览，极大地方便了数据的阅读

响应内容

四、截取移动设备上的网络封包

介绍完Charles的基础使用方法后，接下来就进入本文的正题，也就是怎么在移动开发中使用Charles来截取移动设备上的网络封包，进行数据分析。本文以Android设备为例进行讲解。

首先我们需要保证电脑和移动设备使用的是同一个局域网，然后我们需要将移动设备的网络代理设置为电脑的IP和端口号。

1. Charles设置

我们首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择Proxy -> Proxy Settings，填入代理端口 8888（请记住此端口号，后面Android设备的设置中会用到），并且勾上Enable transparent HTTP proxying就完成了在 Charles 上的设置:

Charles设置

2. 手机设置

首先我们需要获取 Charles 运行所在电脑的 IP 地址，Charles 的菜单栏的Help -> Local IP Address，即可在弹出的对话框中看到 IP 地址：

在手机的设置 -> WLAN中，可以看到当前连接的 wifi 名称：

• 长按
• 点击修改网络
• 打开高级选项
• 在代理一栏选择手动
• 代理服务器器主机名填写第1步看到的电脑IP：192.168.1.101
• 代理服务器端口填写Charles设置中填入的商品号：8888
• 保存

Android设置

设置好之后，我们打开手机上的任意需要网络通讯的程序，就可以看到 Charles 弹出手机请求连接的确认菜单，点击 “Allow” 即可完成设置。

手机连接请求

之后，我们就可以在Charles上看到手机网络请求的所有数据了。

五、断点

Breakpoints 功能类似我们在Android Studio、Eclipse、Xcode等开发环境中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求，这时候我们可以在 Charles 中临时修改网络请求的请求内容、响应内容。

右击我们需要设置断点的请求，选择Breakpoints：

然后选择菜单栏Proxy -> Breakpoint Settings...

双击我们要设置断点的请求，进入编辑：

在这里，我们可以编辑断点的相关参数，常用的功能是根据需要为请求内容（Request）或响应内容（Response）设置断点，即图上的两个复选框，默认为请求内容和响应内容都设置断点，即当发起这个网络请求、以及收到服务器返回的响应数据时，都会进入断点；当然，我们也可以只跟踪Request或Response。

当我们发起这个断点设置的网络请求时，会进入断点，我们就可以修改请求参数：

当服务器返回数据后，也可以修改返回数据，这里我们常用来修改返回标识（如成功、失败）、修改返回数据（无数据、数据内容为指定值），再查看我们的客户端程序的处理是否正确。

• 除了设置断点来修改请求数据，还可以使用网络请求的修改和重发功能来进行请求数据的修改和重发。（右键菜单里的Edit已改成Compose，可能是4.0的时候改的，使用时请注意一下）
• 另外也可以使用Map 功能、 Rewrite 功能对响应数据进行长期和批量的修改。

六、慢速网络

在做移动开发的时候，我们常常需要模拟慢速网络或者高延迟的网络，以测试在移动网络下，应用的表现是否正常。Charles 对此需求提供了很好的支持。

在菜单栏上选择Proxy -> Throttle Setting，在之后弹出的对话框中，我们可以勾选上Enable Throttling，并且可以设置Throttle Preset的类型。

如果我们只想模拟指定网站的慢速网络，可以再勾选上图中的Only for selected hosts项，然后在对话框的下半部分设置中增加指定的hosts即可。

七、其它

Charles除了以上功能，还可以：

• 修改、重发网络请求
• 压力测试
• Map
• Rewrite
• 反向代理
• 截取HTTPS通讯信息（需安装SSL证书）

如有需要，请查阅以下参考资料或相关文档。

八、参考资料

Charles官网
Charles 从入门到精通

PS：欢迎关注SherlockShi博客