利用Charles开发调试技巧总结

利用Charles开发调试技巧总结

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

macOS开发，青花瓷Charles是必不可少的，如同Windows的Fiddler一般，熟悉下面的几点Charles技巧将会令调试事半功倍。

1. 基本配置

1.1 下载安装

Charles的安装非常简单，至于破解也很容易搜索到，此处不再说明。

1.2 配置代理

安装后，如何讲请求代理到charles呢？首先检查软件菜单 proxy -> macOS Proxy 是否已经选中（默认勾选）

接着可以结合chrome插件switchyOmega和全局代理软件Proxifier将请求代理到charles的默认端口8888 127.0.0.1:8888

1.3 安装证书

此时已经可以开始抓包了，如果碰到https链接的地址，会发现都显示<unknown>，因为https是加密的，Charles需要配置证书才可以抓包。

1.3.1 PC

点击 Help -> SSL Proxying -> Install Charles Root Certificate，搜索 Charles Proxy CA 并选择始终信任即可。

1.3.2 Mobile

点击 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser，将手机wifi网络配置代理到当前PC的IP地址的8888(默认)端口。

然后根据弹窗提示在手机浏览器输入 chls.pro/ssl 下载证书(pem->crt)并安装

1.3.3 添加SSL配置

设置Charles的SSL Proxying Settings，添加所有的域名 *:*。

2. Map Local

Map Local 能够将指定的网络请求重定向到本地文件，在实际开发中，可以用来在接口未开发的情况下，本地创建json文件来模拟接口请求。

操作方式：

1. 选中接口，右键选择 Save Response，然后保存为到本地文件(例如json文件)
2. 编辑文件，然后选中接口，右键选择 Map Local
3. 修改 map 的路径为本地文件路径
4. 若想快速修改本地映射，可以在 Tools -> Map Local 中快速修改

注意：Query 参数只对 GET 请求有效，如 name=csxiaoyao&type=mock

3. Map Remote

Map Remote 能够更换远程接口地址，在实际开发中，可以将测试环境地址手动更改为生产环境地址。

操作方式：

1. 选中接口，右键选择 Map Remote，编辑想要替换的地址，保存即可
2. 若想快速修改接口地址映射，可以在 Tools -> Map Remote 中快速修改

4. 修改网络请求

Charles 可以直接修改网络请求，可以方便接口调试。

操作方式：

1. 选中接口，然后点击钢笔(Compose)按钮
2. 任意编辑请求头、参数、Cookie等
3. 选择点击执行(Execute)、恢复更改(Revert)和取消(Cancel)

5. 模拟网速

在开发调试过程中，经常需要测试接口在不同网速下的结果，Charles 可以方便地模拟网速。

操作方式：

1. Proxy -> Throttle Settings 进入Throttle设置
2. 选择网络环境
3. 可以点击面板上的小乌龟(Start Throttling)按钮切换开关Throttle

配置含义： Bandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）

6. 断点调试

Charles 可以对每次请求的 request 和 response 进行断点调试。

操作方式：

1. 选中接口，右键选择Breakpoints打断点开启断点调试
2. 当请求调试的接口时，Charles 会先跳转到编辑请求，修改完后点击执行后，会跳转到编辑响应，修改完后点击执行，完成调试

7. 模拟连续请求

操作方式：

1. 选中接口，右键选择Repeat Advanced
2. 编辑请求次数和延迟等
3. 点击确定自动执行

8. 检索

操作方式：

1. 选中接口，右键选择Find in
2. 支持 Request URL、Request Header、Request Body、Response Header 和 Response Body 里搜索字符串，支持正则表达式

sign.jpg