一、Charles Mock数据【Map Local】:

前提:确保手机已和PC上的Charles代理链接成功。

我们在平时的业务开发中,经常有端上已开发完成,但后端接口还没有Ready的情况;或者需要接口频繁变更数据来测试各种case的情况。这样如果过度依赖接口,肯定会极大降低我们的开发效率,所以我们需要mock数据来提高开发效率。

网上有很多开源的mock框架如ApifoxApipost等,大家有兴趣的可以研究研究。今天要介绍的是使用Charles进行数据mock。

1、保存response数据:

选中接口→右键→选中Save Response→保存。

这样就把该response数据保存到了本地文件。

charles 导出 charles保存数据_数据

2、开启map映射:

选择Tools → Map Local → 勾选Enable Map Local 

charles 导出 charles保存数据_开发语言_02

 选中Add后出现如下图,根据提示填写接口信息即可:

charles 导出 charles保存数据_开发语言_03

 这样即完成了response mock数据映射。

3、修改mock数据:

比如:我将步骤1中response数据中的title字段由原来"注册领取80RMB"改成"登录领取80RMB",只修改本地存储的response mock数据并保存即可:

charles 导出 charles保存数据_前端_04

 可以看到返回的数据已经完成了变更。

4、取消mock数据:

如果此时接口已经ok,想取消mock数据,通过如下步骤即可:

选择Tools → Map Local → 【取消勾选】Enable Map Local

二、Charles 弱网测试【Throttle Setting】:

Charles 通过修改Throttle Setting可以模拟各种网络如:2G/3G/4G等也可以手动设置网速限制等,是我们开发/测试模拟弱网环境,复现弱网问题的较好的方案:

使用步骤如下:

  1. Proxy → Throttle Setting
  2. 勾选Enable Setting
  3. Only for elected hosts 勾选中可以添加需要限速的接口,如果不勾选表示所有接口都执行以下限速设置
  4. Throttle preset 可以选择已经设置好了的网络【一般弱网测试选择该项后,下面的内容则不需要再修改】
  5. 打开App/网页等请求就会变慢,可以通过修改Throttle preset,来调节网络的快慢。

charles 导出 charles保存数据_java_05

Throttle的打开和关闭,也可以通过如下几种方式快速操作:

  • 方式一:Proxy →Start/Stop Throttle
  • 方式二:Charles小水壶邮件→Throttling

charles 导出 charles保存数据_开发语言_06

  • 方式三:点击Charles面板上部的小乌龟--变绿则表示打开;变灰则表示关闭。

charles 导出 charles保存数据_前端_07

三、Charles 复制运用curl 指令【Copy cURL Request】:

 日常业务开发中,我们可以使用curl命令直接在终端发送GET/POST请求,以快速获取服务端返回的数据,来查看数据。那么如何快速的获取准确完整的curl请求呢,可以在Charles快速获取:

1、选中对应接口(右键) → 2、Copy cURL Request

charles 导出 charles保存数据_开发语言_08

GET请求一般会获得(类似)如下指令:

curl -H  "Content-Type: application/json;charset=UTF-8" -H "appVersion: 923" -H "User-Agent: okhttp/3.8.0" -H "Host: www.testview.com" --compressed "https://www.testview.com/config/dialog-comm-test?deviceType=2&version=0&deviceId=8999899"

 如果是POST,则获得(类似)如下指令:

curl -H  "Content-Type: application/json;charset=UTF-8" -H "appVersion: 923" -H "User-Agent: okhttp/3.8.0" -H "Host: www.testview.com" --data-binary "{\"type\":4,\"uid\":\"456\"}" --compressed "https://www.testview.com/config/dialog-comm-test?deviceType=2&version=0&deviceId=8999899"

copy到终端 →回车 可快速获取服务端数据,也可以通过修改请求参数进行数据联调,极大的提高开发效率。

四、Charles 修改请求(Request)参数:

 如果我们在平时的开发测试中,希望通过修改请求参数,查看服务端返回的不同数据,那么就可以在Charles中通过以下两种方式来完成:

方式一、

1、选中对应接口 → 2、点击如图的笔 → 3、在Compose区域修改请求参数  → 4、执行

charles 导出 charles保存数据_java_09

 方式二、

1、选中对应接口 → 2、选中Breakpoints【断点】

charles 导出 charles保存数据_java_10

然后执行接口请求【真实数据请求 或 点击下图箭头】:

charles 导出 charles保存数据_数据_11

就会出现断点调试Breakpoints页面,再进行如下操作即可:

1、选中EditRequest → 2、选中Headers → 3、在3区域修改请求参数  → 4、执行

charles 导出 charles保存数据_数据_12

 这种方式是通过断点调试的方式去修改,也可以在下图步骤中,进行具体的断点设置:

charles 导出 charles保存数据_开发语言_13

五、Charles 修改响应(Response)数据:

方式一、

1、选中对应接口 → 2、选中Breakpoints【断点】

charles 导出 charles保存数据_java_14

然后执行接口请求【真实数据请求 或 点击下图箭头】: 

charles 导出 charles保存数据_数据_11

就会出现断点调试Breakpoints页面,再进行如下操作即可:

1、选中EditResponse【需要点击一次execute执行请求,才会出现EditResponse选项】 → 2、选中JSON Text → 3、在3区域修改response的json数据  → 4、执行

charles 导出 charles保存数据_数据_16

这样实际响应的json数据, 就会被修改,这样便可以愉快地进行后续的json数据兼容测试。

六、Charles 模拟阻塞(Block)接口【Block List】:

1、选中对应接口(右键) → 2、Block List → 3、重新请求接口:

charles 导出 charles保存数据_前端_17

block接口后,重新请求接口数据,响应结果如下:

charles 导出 charles保存数据_java_18

会发现并没有数据返回,表明block成功。

此种方法可用于一些容错测试,进而对代码进行相关的优化,避免接口真的出现异常时,能够显示出我们希望的兜底或容错的页面。 

七、Charles 在Structure/Sequence中过滤接口请求【Recording Settings】:

charles 导出 charles保存数据_前端_19

charles 导出 charles保存数据_前端_20

如上图步骤所示,一般情况下我们过滤接口请求时,一般会用到Include和Exclude选项:

Include:

Include表示,只抓取你在Location添加的域名接口,其他的则不抓取,也就是说只在Structure/Sequence中显示你Location中添加的接口【至于其他的接口,也不是完全不显示,会在最底部箭头那闪过】:

charles 导出 charles保存数据_前端_21

Exclude:

Exclude则相反,它会过滤掉在Locations添加的接口,其他的会正常显示。

所以,当你发现你的Structure/Sequence中看不到接口数据了,不妨看看是不是配置了Record Settings的Include/Exclude选项导致的。

八、Charles 进行手机https抓包(包含其他两种方式):

方式一:

Android端Charles抓包

方式二:

Android OkHttp/Retrofit框架使用Interceptor 抓包/mock数据

方式三:

如果使用其他方式都没有成功抓取https数据,那么使用Android Studio的Network Inspector来抓包也是一种可用的方式,基本步骤下图已给出,具体可参考官网【使用 Network Inspector 检查网络流量】

charles 导出 charles保存数据_前端_22

九、Charles 重写功能【Rewrite】:

Rewrite功能适合对某一类网络请求进行一些正则替换,以达到修改请求/结果的目的。下面是一些常用场景举例:

场景一、添加请求参数:

如希望在请求参数中添加userid,那么就可以通过打开Tools → Rewrite Settings,按照如下5步进行配置即可。

charles 导出 charles保存数据_数据_23

其中第4步截图如下:

charles 导出 charles保存数据_charles 导出_24

第5步截图如下:

charles 导出 charles保存数据_前端_25

再次进行相关接口请求,则可以看到,请求参数中多了userid参数,如下图:

charles 导出 charles保存数据_开发语言_26

场景二、修改response结果数据:

在场景一种的步骤5中Rewrite Rule中添加如下配置。

charles 导出 charles保存数据_开发语言_27

则可以看出,其中有个字段如record_status_card,原先返回的是2,这里把他修改成了1,再次请求接口可以看出,已经返回新修改的值1

持续更新中...