Charles 是我们app开发人员常用的截取网络封包的工具。Charles通过将自己设置成网络访问代理,能够监听到所有的网络请求,从而实现网络的截取和分析。
Charkles 主要的功能包括:
- 支持SSL代理
- 支持流量控制
- 支持AJAX调试。可以自动将JSON或XML数据格式化,方便查看
- 支持AMF调试,可以将Flash Remoting 或Flex Remoting信息格式化
- 支持重发网络请求,方便后端调试
- 检查HTML、CSS和RSS内容是否符合W3C标准
Charles的安装和使用
点击下载Charles 下载最新版本的Charles安装包
将Charles设置成系统代理
使用Charles的第一步就是将其设置成代理服务器来完成封包截取。
第一次启动Charles 会提示你设置成代理。也可以忽略请求,然后在需要将Charles设置成系统代理时,选择菜单中的”Proxy” -> “Mac OS X Proxy”来将Charles设置成系统代理,之后就能看到源源不断网络请求。
Charles 主要提供两种查看封包的视图,分别为“Structure” 和 “Sequence”, 它们的功能分别为:
* Structure视图将网络请求按访问的域名分类。
* Sequence 视图将网络请求按访问的时间排序
过滤网络请求
- 在主界面的中部的Filter栏中填入需要过滤出来的关键字。例如我们的服务器的地址是https://wsy.com 那么我只需要在Filter栏中填入wsy即可。
- 在Charles的菜单栏选择“Proxy”->”Recording Settings”,然后选择Include栏,选择添加一个项目,然后填入需要监控的协议,主机地址、端口号。这样就可以只截取目标网站的封包了,如下图:
通常情况下 我们使用前一个做一些临时性的封包过滤,后一个做一些经常性的封包过滤
使用Charles协助app开发
Charles通常用来截取本地的网络封包,但是当需要时,我们也可以用它来截取其他设备上的网络请求。下面我就以iPhone为列。
Charles上的设置
要截取iPhone上的网络请求,首先需要打开Charles的代理功能,在Charles的菜单栏上选择”Proxy” -> “Proxy Settings”, 填入代理端口8888,并且勾选”Enable transparent HTTP proxying”,就完成了Charles的设置如下图:
iPhone上的设置
首先 我们要先获得Mac上的ip地址,打开Terminal 输入ifconfig en0,如下图获得该电脑的IP地址:
在iPhone上的“设置”->“无线局域网”中,可以看到当前连接的WIFI名,通过单击右边的详情按钮,可以看到当前连接上的WIFI的详情信息,包括IP地址、子网掩码等信息。在其最底部有“HTTP代理”一项,我们将其切换成手动,然后填上Charles运行所在的电脑的IP地址,以及端口号8888,如下图:
设置好后,打开iPhone上的任意应用请求网络,就可以看到Charles弹出请求连接确认菜单,单击“Allow”按钮即可完成设置,如下图:
模拟慢速网络
在做app开发时,我常常需要模拟慢速网络或者高延迟的网络,以测试在移动网络下的应用表现是否正常。Charles对此需求提供了很好的支持。
在Charles的菜单上,选择“Proxy” -> “Throttle Setting”项,在弹出的对话框中,我们可以勾选上”Enable Throttling”, 并且可以设置Throttle Preset的类型,如下图:
如果我们只想模拟指定接口的慢速网络,可以在上图中勾选”Only for selected hosts”项,然后在对话框的下半部分设置中增加指定的Host即可。
截取SSL信息
Charles默认并不截取SSL的信息,如果你想截取某个网站上所有的SSL网络请求,可以在该请求上单击右键,选择“Enable SSL Proxying”,如下图。
这样,对于该HOST的所有SSL请求都可以被截取到了。
修改网络请求内容
在app开发中为乐调试接口,我们需要反复尝试不同参数的网络请求。Charles可以方便地提供网络请求的修改和重发功能。只需要在你要选择的网络请求上单击上面菜单栏的的编辑图案即可,即可创建一个可编辑的网络请求。如下图
通过以上我们可以修改请求的任何信息,包括URL地址、端口、参数等等,之后单击“Execute”按钮即可发送修改后的网络请求
修改服务器返回内容
根据具体的需求,Charles提供了Map功能,Rewrite功能及Breakpoints功能,它们都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:
- Map功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
- Rewrite功能适合对网络请求进行一些正则替换
- Breakpoints功能适合做一些临时性的修改
Map功能
Charles的Map功能分Map Remote 和 Map Local两种,顾名思义,Map Remote是将指定的网络请求重定向到另一个网址,Map Local是将指定网络请求重定向到本地文件。在Charles的菜单中,选择”Tools”->”Map Remote”或“Map Local”即可进入相应功能的设置页面,如下图所示。
对于 Map Remote 功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空,下图是一个示列,将所有192.168.2.234(测试服务器)的请求重定向到了www.wsy.com(线上服务器)。
对于Map Local功能,我们需要填写重定向的源地址和目标文件。对于一些复杂网络请求结果,我们可以先用Charles提供的”Save Response …”功能,将请求结果保存到本地,如下图,然后稍加修改,使其成为我们的目标映射文件。
Rewrite功能
Rewrite 功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。例如,我们app有一个API请求是获取用户信息,而我当前的昵称是”dingqiankun”
我们想试着直接修改网络返回值,将”dingqiankun”换成“dingnan”,于是我们启用Rewrite功能,然后按下图进行设置。
完成设置之后,我们就可以从Charles中看到,之后的API获得的昵称被自动Rewrite成了“dingnan”
Breakpoints功能
Rewrite功能最适合做批量和长期替换,但是很多时候,我们只是想临时修改一次网络请求结果,使用Rewrite功能虽然也可以达到目的,但是过于麻烦,对于临时性修改使用Breakpoints。
如下图所示临时修改获取用户信息的API,将用户的昵称进行 了更改,修改完成后单击“Execute”按钮就可以让网络请求继续进行。