Charles使用详解

  • 下载安装
  • 基础配置(配置手机的请求用电脑抓包)
  • 高级功能
  • 请求映射(使用charles进行本地调试,修改接口请求返回数据)
  • Map Local
  • Map Remote
  • 取消结果替换
  • 断点调试
  • 修改请求(使用Charles进行手动发送请求)
  • 如何使用Charles模拟测试弱网环境
  • 其他小功能
  • 重复请求
  • 专注个别请求
  • Charles如何关闭接口的缓存设置
  • 阻塞请求
  • 常见问题:


下载安装

官网下载安装一个免费试用版,激活可以在网上找激活码激活即可。
下载地址:https://www.charlesproxy.com/download/

PS: 不激活就隔一段时间就重启,隔一段时间就要等几秒广告。难受滴很。

Charles 使用usb连接 charles使用教程视频_macos

基础配置(配置手机的请求用电脑抓包)

  1. 手机电脑连接同一网络(同一wifi或同一路由器网络下等)
  2. Charles菜单-> Proxy->开启Recoding和SSL Proxying
  3. Charles菜单-> Proxy->SSL Proxying Setting,设置要代理的域名。如果所有请求都抓,可参考设置:
  4. 手机设置wifi->高级设置->代理->手动
    主机名: 使用Charles的电脑的ip地址
    代理端口: Charles默认开启端口8888
  5. 手机打开浏览器(最好Chrome 或 系统自带的浏览器)访问:chls.pro/ssl ,会自动下载一个CA证书
  6. 打开手机的设置->搜索CA证书->安装证书(各个机型不一样,有的是为本机用户安装,有的可以直接安装)
  7. 安装证书后,Charles会显示:
    点击Allow。如果点击失败,只需要重启一下Charles就会重新出来。或者在以下设置中,添加手动添加需要抓包的设备的ip地址。设置成0.0.0.0/0可允许所有设备连接8. 重新启动Charles9. 查看Charles,应该可以正常抓包了,包括HTTPS的包。

高级功能

请求映射(使用charles进行本地调试,修改接口请求返回数据)

Map Local

Map Local就是将请求结果替换成本地数据。用的比较多的场景是mock数据修改;接口方开发未完成时根据协议先进行调试等。

路径: 右键请求->选择Map Local

如:

Charles 使用usb连接 charles使用教程视频_右键_02


Charles 使用usb连接 charles使用教程视频_Charles 使用usb连接_03


Tips: 可以保存当前接口返回的数据格式,然后直接在此基础上编辑。(在请求上右击有一个save Response可以保存到本地)

Map Remote

可以将当前请求指向另一个请求。比较常见场景是用在替换域名或者替换请求参数之类。可以直接在测试包下请求生产环境请求,可以自己主动更改请求参数等。

路径: 右键请求->选择Map Remote

Charles 使用usb连接 charles使用教程视频_http_04

Charles 使用usb连接 charles使用教程视频_macos_05

取消结果替换

顶部导航栏->Tools->Map Local(Map Remote)

Charles 使用usb连接 charles使用教程视频_macos_06

断点调试

右键需要断点的接口,点击BreakPoint,然后在工具栏中点击下方按钮开启

Charles 使用usb连接 charles使用教程视频_https_07

Charles 使用usb连接 charles使用教程视频_http_08


接下来执行时,如果抓到这个请求,会先跳转到断点界面,允许用户Edit Request,此时是编辑发送的请求。

Charles 使用usb连接 charles使用教程视频_https_09


点击Execute之后,会再次触发断点,此时断点的是返回结果的时候,允许用户Edit Response。

Charles 使用usb连接 charles使用教程视频_http_10


此时再点击Executer之后,就会真正返回给客户端了。

注意: 如果修改的时间比较久,而超时时间设置的比较短,很快就超时了,就没有效果了。可以把超时设置的稍微久一点。

修改请求(使用Charles进行手动发送请求)

选择一个请求,在上部工具栏有一个蓝色钢笔按钮(Compose a new request base on selection),可以修改当前请求的参数等,可以用来验证请求数据是否正常,验证请求参数异常情况的返回结果等。

Charles 使用usb连接 charles使用教程视频_https_11

Charles 使用usb连接 charles使用教程视频_右键_12

如何使用Charles模拟测试弱网环境

模拟网络环境指的是模拟网速之类的,一般场景在测试弱网环境之类的。

路径: 顶部导航栏 -> Proxy -> Throttle Setting

Charles 使用usb连接 charles使用教程视频_https_13

PS: 工具栏里面的绿皮小龟可以快捷开关

Charles 使用usb连接 charles使用教程视频_macos_14

其他小功能

重复请求

这个功能可以进行简单的一个压力测试。

路径: 需要重复的请求右键-> Repeat Advanced

Charles 使用usb连接 charles使用教程视频_http_15

专注个别请求

路径: 需要关注的请求右键-> Focus

关注的就在上面显示了,不关注的在下面OtherHosts中收起来了。这样比较清晰。可以只关注我们自己的APP的域名之类的。

Charles 使用usb连接 charles使用教程视频_macos_16

Charles如何关闭接口的缓存设置

有时候由于请求有缓存设置,导致我们可能很难执行后续的步骤。

路径: 需要去除缓存的请求右键-> No Caching

Charles 使用usb连接 charles使用教程视频_Charles 使用usb连接_17

阻塞请求

这个功能主要是模拟一些网络异常的情况,可以直接阻塞接口。

路径: 需要阻塞的请求右键-> BlockList

Charles 使用usb连接 charles使用教程视频_右键_18


设置阻塞的请求如何处理,可以直接抛弃,或者返回403

路径: 顶部导航栏 -> Tools -> Block List

Charles 使用usb连接 charles使用教程视频_http_19

常见问题:

1.手机安装了证书,但是存在部分HTTPS请求还是UnKnown状态。
可以看一下APP的网络安全设置,如果没有就加上下面代码这一段内容,代表在debug模式下允许app信任权限为user权限的证书。(官方说正常打debug包就自动会添加这个,但是在Flutter下好像不太行)

app/src/main/res/xml/network_security_config.xml
<debug-overrides>
    <trust-anchors>
        <certificates src="user"/>
    </trust-anchors>
</debug-overrides>