又是一个开发效率神器——Charles

水深无声 2024-03-31 16:53 26阅读 0赞

## 背景 ##

在开发的过程中，经常需要查看接口数据，web端可以使用浏览器的开发者工具查看，但是手机端微信小程序等就比较难以查看接口信息。

## Charles ##

Charles是一款Http代理监听工具，可以让开发者查看通过这个代理的所有连接信息，包括请求数据、相应数据和请求头等信息。

Charles主要功能有：

*  抓取http和http是数据包
 *  重发网络请求，方便调试
 *  支持修改口请求数据和返回结果、
 *  限制网络速度，模拟低网速场景

## Charles实践 ##

光说不练假把式，看再多理论都不是自己的，只有自己动手尝试了才能成为自己的东西。

### Charles安装 ###

1.  安装好java环境（具体操作自行百度）
2.  去官网下载安装包安装Charles

### PC端抓包 ###

#### 安装证书 ####

1、代理 -> windows代理打勾

![image.png][]

2、选择帮助 -> SSL 代理 -> 安装Charles Root 证书

![image.png][image.png 1]

3、安装证书

![image.png][image.png 2]

![image.png][image.png 3]

**将证书安装在“受信任的根证书颁发机构”**  
![image.png][image.png 4]

![image.png][image.png 5]

4、代理 -> 设置SSL代理设置

![image.png][image.png 6]

![image.png][image.png 7]

5、选择帮助 -> SSL 代理 -> 在移动设备或远程浏览器上安装Charles Root 证书

![image.png][image.png 8]

浏览器输入chls.pro/ssl

![image.png][image.png 9]

打开浏览器设置 -> 隐私设置和安全性 —> 安全 -> 管理设备证书（管理您设备上的HTTPS/SSL证书）

![image.png][image.png 10]

![image.png][image.png 11]

浏览 -> 选择所有文件（才能展示下载的证书）  
![image.png][image.png 12]

![image.png][image.png 13]

完成  
![image.png][image.png 14]

#### pc测试抓包 ####

访问网站就可以看到接口请求数据了

![image.png][image.png 15]

#### 应用 ####

假设测试或者前端同学要验证下收藏这个数量是否能正常显示千分符，那可能就要后端同学改数据或者自己造数据，现在我们有一种新的解决方法，可以使用Charles的debug功能来完成对接口请求数据和返回结果的修改，可以快速复现特殊场景，大大提高了开发效率。

![image.png][image.png 16]

在Charles中找到借口，右键 -> 断点打勾

![image.png][image.png 17]

刷新页面，就会重新调用接口进入断点，可以修改请求参数，我们这边不修改

![image.png][image.png 18]

![1670504177746.jpg][]

查看页面展示发现数据已经被修改了

![image.png][image.png 19]

### iphone抓包 ###

查看电脑ip，帮助 -> 本机ip

![image.png][image.png 20]

手机连接和电脑同一个局域网的wifi，然后点感叹号“！” -> 配置代理 -> 手动 -> 储存

服务器IP：PC机器的IP

端口号：8888

![image.png][image.png 21]

![image.png][image.png 22]

![image.png][image.png 23]

Charles上会弹出确认窗口点击允许（allow）

选择帮助 -> SSL 代理 -> 在移动设备或远程浏览器上安装Charles Root 证书

![image.png][image.png 8]

手机浏览器访问：chls.pro/ssl  
下载证书

![image.png][image.png 24]

![image.png][image.png 25]

打开手机设置 -> 通用 -> VPN和设备管理 —> 选择已下载证书 -> 安装

![image.png][image.png 26]

![image.png][image.png 27]

![image.png][image.png 28]

![image.png][image.png 29]

然后去手机设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 信任证书

![image.png][image.png 30]

![image.png][image.png 31]

至此就完成了iphone的证书安装，现在打开微信小程序就可以看到接口数据了

![image.png][image.png 32]

### android抓包 ###

Charles在Android安装证书的时候需要root权限，暂时还未想到解决方案，之后再补充。

## 常见问题解决 ##

### 1、手机无法抓包的问题 ###

检查是否配置好代理IP,端口号

检查是否与电脑在同一个局域网

检查是否关闭防火墙，代理，翻墙软件

弹出询问点击“allow”或者“deny”时，误点“deny”，关闭charles重启，手机再次浏览则会重新弹出询问

### 2、证书过期重置 ###

工作中使用charles对app进行抓包，突然有一天，无法抓包了，显示Unknown。。。。

然后去描述文件里查看，提示证书已过期。

问题：

如何更换证书？

如何解决：

在charles -> 帮助 -> 重置证书

[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c45b2f0a4ca84d20bdc94c67594fe593.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b4df0d5682e34db4bf46711cfc6eedd8.png
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3c8fdcf095e54eea8a03d49c86d2e57e.png
[image.png 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7129bb53d701464fad352555bdea738e.png
[image.png 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a8f824c0c81948c2b0161cc8a333116d.png
[image.png 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/277a282662e04e69aafcb551a3e6f1f6.png
[image.png 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/de9cab17b5e74145bcab333955ad0dac.png
[image.png 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7f1b07801822448f934174892806098e.png
[image.png 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f7843a0824f54ee5889aaba933a244f3.png
[image.png 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2136e47b4959456fb0e7f72f976c3499.png
[image.png 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/550a6c327f7b452f8ac281b8a0e7091d.png
[image.png 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8ba7a1c2b9e046708f50b62649aca593.png
[image.png 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/06780d966d8f488e8c811e4aacd35b08.png
[image.png 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/70fe170c80f346f8b63225b38b5cd5dd.png
[image.png 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/724bb41112864584adbdbd0b7211d903.png
[image.png 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d34fead0a1d049ae9c11e220556719da.png
[image.png 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cda9df03999a43c18da5007135453cc1.png
[image.png 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2ec642f0564344dba1c56617445a9292.png
[image.png 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/aa0b15c7f6954bc8b01c02fea29c96de.png
[1670504177746.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/abde9fd0db77409bb39aa0dd54354133.png
[image.png 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/5df7250906b44795bc947c58e787dff2.png
[image.png 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/650246a0161a4bdc9113afff71b460d2.png
[image.png 21]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a5b300ec76164e1ba8d1641d4e0aeaed.png
[image.png 22]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/742fb5065cc447bc8e4458cb3ffb327d.png
[image.png 23]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2cb95af66df54bf9aa9c1128dd803065.png
[image.png 24]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/fed95a026e5b4bd4b56cd0a64dc7fd5e.png
[image.png 25]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4b15ef706f9640d4bd923783dc8bd246.png
[image.png 26]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/660cf568e45b41ffabb789c066aa97c3.png
[image.png 27]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/5bafdc0160d2486ebefb936e226fe65a.png
[image.png 28]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cf52a981862c406a835d51e9d600f243.png
[image.png 29]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/41353480c1714f49a21196c755465d5a.png
[image.png 30]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2550c7f0eed94a56bd8bb3d9daef78d0.png
[image.png 31]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/78db0e5bab7f44eabcd82cfce484dc57.png
[image.png 32]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6d164fe91a6543c8b8d2007aec482997.png