Charles:移动开发“自测利器”

1,266 阅读5分钟

本文介绍的功能:

  • 安装和基本使用
  • 支持https
  • 断点的使用(修改请求和返回数据)
  • 重定向和加载本地数据

安装和使用

下载地址 (打开连接搜索)
1、打开上面地址,然后搜索charles,有下载地址和相应的破解方法
2、安装,打开软件
3、打开 Help — Local IP Address。查看本机的IP地址

查看本机IP地址.png
查看本机IP地址.png 查看本机IP地址.png
查看本机IP地址.png

3、设置手机,手机需要连接到和电脑在同一网络的 WIFI

依次打开“设置 — 无线局域网 — 点击已选wifi最右边的感叹号”

设置手机代理.png
设置手机代理.png

填好以后,返回。 打开Chales即可看到手机的http请求都可以被Charles监控

以美团外卖为例:
清空接口:可以清空侧栏所有记录的接口
停止记录:接口依然会通过代理,但是不会在侧栏记录和显示

Charles使用界面.png
Charles使用界面.png

抓包Https请求

上面最基本的抓包使用,是不能抓取https的数据的,抓取到的https数据是乱码的。随着苹果方面的要求,iOS 的App都需要使用https的请求。所以绝大部分的接口还是需要https。所以charles需要支持https

1、电脑证书

电脑证书.png
电脑证书.png

选择“Install Charles Root Certificate” 后可能需要输入电脑密码,输入密码以后,会自动打开“钥匙串”

此时电脑证书已经安装成功,在钥匙串中找到相应的证书

Charles Proxy CA

双击证书,把证书的信任设置为“始终信任”

设置证书信任.png
设置证书信任.png

2、Charles设置

Charles代理设置.png
Charles代理设置.png

打开Charles的 SSL Proxying Settings...

Charles代理设置.png
Charles代理设置.png

3、手机证书

在保证手机连接到了charles的代理后,再安装手机证书
在保证手机连接到了charles的代理后,再安装手机证书
在保证手机连接到了charles的代理后,再安装手机证书

手机证书地址
手机证书地址

按照上面的路径,可以看到下面这个

使用Safari打开网址.png
使用Safari打开网址.png

手机安装证书完成后的界面如下

证书安装完成.png
证书安装完成.png

★ 注意:对于 iOS 10.3 及其以后的版本,安装完证书后,还需要设置证书的权限

路径 “设置 — 通用 — 关于本机 — (滑到最下面) — 证书信任设置 ” 把对应证书的开关打开

断点的使用

首先介绍一下什么是断点

Charles的断点

  • 在抓取接口时,请求发出去之前,拦截并暂停。此时可以修改请求的参数
  • 在接口返回数据,而数据到达客户端之前,拦截并暂停。此时可以修改返回的数据
断点开关.png
断点开关.png

添加断点

方法一
直接根据自己的需求添加断点

断点设置
断点设置 添加断点
添加断点

方法二
快速添加断点

右击特定接口,直接添加接口断点

快速添加
快速添加

在这个模式下,可以整个域名下所有接口添加断点

域名添加
域名添加

快速添加断点时需要注意
打开断点设置界面,查看新添加的断点中的 Query 项是否有类似时间戳的参数,如果有的话,每次请求的时间参数不同,会导致下次请求的时候,由于时间参数不同,断点功能失效。解决方法可以清空 Query项的内容。

使用断点

设置好接口断点以后,再次请求该接口,Charles就会出现如下界面

接口断点
接口断点 接口断点
接口断点

结束断点以后,App拿到的收据就是你修改后的数据

这个功能还是比较实用的,这样就可以省略一些服务端需要的配合。自己可以通过修改数据来模拟出不同的情况。

重定向、加载本地数据

在发开和测试的过程中,不免会遇到这种情况。就是需要频繁的切换开发环境和测试环境,或者是开发环境中的数据比较丰富,需要切换到开发环境中看一下数据显示情况。这个时候Charles的重定向功能就很好用了

重定向

添加
添加设置
设置

还可以通过对接口右击的方式添加,如下图

接口重定向
接口重定向
这样设置好以后,再次访问 wmapi.maituan.com就会被转到 newwmapi.maituan.com这个域名。不需要切换的时候,只需要关闭功能即可

加载本地数据

上面我们介绍了通过断点可以修改返回数据,来模拟出不同的显示情况。断点的情况只适合比较少,比较快速的修改。如果需要修改特别多的数据。或者是在开发刚开始,接口还不可使用时,移动端需要一些假数据来支持自己的开发。这个时候就可以用Charles加载本地的假数据来开发

这个时候需要配合使用的软件 JsonEdit 下载地址

通过JsonEdit软件 和 后台给的接口文档的结构,自己制造出假数据 保存到本地json数据

制造假数据
制造假数据

本地数据制造完成后,返回到Charles,选择需要假数据的接口,右击


设置
设置 设置
设置

这样设置好以后,此接口的数据,就是加载的本地刚刚保存的数据。修改本地数据,然后重新请求接口,App上的显示就会跟着改变。在自测环节这样的做法是很高效的。