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

作者: Biharry | 来源:发表于2017-08-07 20:57 被阅读371次

    本文介绍的功能:

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

    安装和使用

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

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

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

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

    设置手机代理.png

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

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

    Charles使用界面.png

    抓包Https请求

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

    1、电脑证书

    电脑证书.png

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

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

    Charles Proxy CA

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

    设置证书信任.png

    2、Charles设置

    Charles代理设置.png

    打开Charles的 SSL Proxying Settings...

    Charles代理设置.png

    3、手机证书

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

    手机证书地址

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

    使用Safari打开网址.png

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

    证书安装完成.png

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

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

    断点的使用

    首先介绍一下什么是断点

    Charles的断点

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

    添加断点

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

    断点设置 添加断点

    方法二
    快速添加断点

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

    快速添加

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

    域名添加

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

    使用断点

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

    接口断点 接口断点

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

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

    重定向、加载本地数据

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

    重定向

    添加 设置

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

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

    加载本地数据

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

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

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

    制造假数据

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


    设置 设置

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


    相关文章

      网友评论

        本文标题:Charles:移动开发“自测利器”

        本文链接:https://www.haomeiwen.com/subject/hucalxtx.html