charles常用调试方法

一、Charles下载与安装

1、下载地址

https://www.charlesproxy.com/download/

 2、软件激活

 二、mobile下载证书

1、查看代理IP

Charles安装成功后，进入主界面→Help→Local  IP Address 查看本地IP

2、手机连代理

手机进入设置-->无线局域网-->代理配置-->手动，输入代理IP地址

 3、安装手机证书

Charles→Help→SSL Proxying→Install Charles Root Certificat ...Device or Remote Browser.根据提示框内容，在手机浏览器访问[chls.pro/ssl](http://chls.pro/ssl) 下载证书安装。

附1:若手机无法打开上述地址（Charles版本更新后之前的地址可能打不开了），可尝试用http://www.charlesproxy.com/getssl/打开。

附2：小米手机，不要用自带的浏览器下载，可以用UC下载，确保下载的是.pem文件

4、开启信任

安装之后进入手机找到安装的证书，开启信任。（**IOS**开启路径为设置→通用→关于本机→证书信任设置，**Android**开启路径一般为：设置—其他设置—安全与隐私—受信任凭据）

5、设置Proxy Settings

证书安装完成之后进入Charles主界面—>Proxy—>Proxy Settings-->Proxies,勾选enable

6、设置SSL Proxy Settings

进入Charles主界面—>Proxy—>SSL Proxy Settings→SSL Proxying,勾选enable,并添加端口(初次使用可添加全部 *:443 )

7、重启Charles

此时手机访问，Charles会记录所有请求地址。（若发现https的请求还是<unknow>状态，可以查看具体请求的SSL Proxying 是否已设置为Enable状态，然后重启Charles）

 三、常用调试方法

1、基本操作

查看接口数据

经过前面的步骤，此时手机访问的信息都经过了Charles的代理能抓取到所有信息，以某电商XX书APP为例，所有的操作都能看到请求的前端页面链接，请求的后端结果，以及每个接口的具体参数。

2、Remote Map

 **【应用场景】环境转发**

比如将所有访问www.xiaohognshu.com的接口转发到c.xiaohongshu.com

 【操作步骤】

1、Charles主界面-->Tools-->Remote Map 选项中添加规则

2、此时在线上www环境访问XX书的会员页，实际访问的接口已经转发到了C环境

3、Local Map

 **【应用场景】mock数据**

比如在前端mock后端接口返回数据时用到，原本接口返回name为【小雯】，前端mock将name改为超长字符验证样式问题：

初始访问后端接口返回和前端页面展示为：

 **【操作步骤】**

1、在Charles主界面→Tools——>Local Map 中添加规则，将指定的path返回Map to本地的json文件（本地json数据为mock数据）。

2、此时手机再次访问会员页时看到返回的会员name已mock为了【我是很长的名字啦啦啦啦啦啦啦啦啦啦】

4、设置断点修改请求数据

对单个接口设置断点请求进行定位，修改请求和返回数据查看效果

 **【应用场景】模拟场景**

当接口/api/**/popup返回"result": 0时，商城首页没有弹窗信息，请求结果和页面如下：

此时我们对这个接口设置断点，访问这个接口时用我们给定的测试返回数据，模拟每次首页都满足出现商品评价的弹窗。

**【操作步骤】**

1、Charles主界面→Proxy→breakpoint settings设置框中，按照下图操作（根据需要勾选是否要修改请求参数和返回参数，本例中只修改返回参数）：

2、设置完以上操作时，手机再次进入APP商城首页，Charles会自动进入我们设置的断点处，此时我们编辑返回json数据,并点击右下角的【execute】执行：

3、执行之后接口返回的数据已经变成了我们想要的数据，同时C端APP中的首页，评价弹窗出现。

（~~~~欢迎补充和更正~~）