Charles 其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。该软件是用 Java 写的,能够在 Windows,Mac,Linux 上使用。开发 iOS 都在 Mac 系统上吧,安装 Charles 的时候要先装好 Java 环境。

主要功能

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

抓包开始

  1. 打开 Charles,点左上角 Proxy=> 勾选 macOS Proxy 和 Start Recording
  2. 这样你的浏览器访问的请求都被抓取过来了。

注:如果在使用 ss,请先关闭 ss。然后重启 Charles,就可以使用了。

如果你发现返回的是乱码,首先看是在 http 请求还是 https 请求,如果是 http 请求,那么应该就是返回来的中文乱码,解决方案是找到该软件显示包内容,Contents 目录下的 info.plist,打开文件找到 vmoption,添加-Dfile.encoding=UTF-8 即可。

如果是 https 请求出现的乱码,如下图这种情况

这时候你就需要安装 Charles 的 CA 证书了,首先到去 http://www.charlesproxy.com/ssl.zip 下载 CA 证书文件。双击 crt 文件,选择总是信任就可以了,当然如果要抓取 iPhone 设备上的 HTTPS 请求,需要在 iPhone 上也安装一个证书,在手机浏览器输入这个网址:http://charlesproxy.com/getssl ,点击安装即可。然后你就可以告别那烦人的乱码,可以愉快地抓包了。

真机抓包

抓取真机上的数据非常的简单,首先使手机和电脑在一个局域网内,不一定非要是一个 ip 段,只要是同一个路由器下就可以了。按照上面说的把证书安装好,然后找到电脑的 IP,你可以选择在终端输入 ifconfig en0 来获取,也可以选择打开网络偏好设置来查看。

打开 Charles 的代理设置:Proxy->Proxy Settings,设置一下端口号,默认的是 8888,这个只要不和其他程序的冲突即可,并且勾选 Enable transparent HTTP proxying。

在手机上连接上和电脑在同一局域网的网络上,然后设置 HTTP 代理。端口号就是刚刚在 Charles 上设置的那个。

然后在手机上随便打开一个网址,这是 Charles 会弹出一个框让你确认是否代理,点击 allow 就可以了,然后你就会在 Charles 上发现手机上的请求了。

过滤内容

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

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

断点调试

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

模拟低网速

有时候在开发的时候我们想要模拟一下网络慢的情况,这时候 Charles 他是可以帮助到你的,在 Proxy->Throttle Setting,然后选择 Enable Throttling,在 Throttle Preset 下选择网络类型即可,具体设置你可以自行拿捏。设置完以后下次使用就可以直接点击小乌龟了。

请求重定向

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

内容替换

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

其他

Charles 还有一下其他的妙用。慢慢的去发掘吧!