Charles 在移动开发中的应用
1 引言
- 随着移动应用的普及和发展,开发者面临着越来越复杂的网络调试任务。Charles 作为一款功能强大的网络调试代理工具,能够帮助开发者轻松捕获和分析网络请求,模拟不同的网络环境,从而优化移动应用的性能和稳定性。本文将详细介绍 Charles 在移动开发中的应用场景和使用方法。
2 Charles 简介
2.1 什么是 Charles?
- Charles 是一款跨平台的 HTTP 代理 / HTTP 抓包工具。它可以捕获设备发出的所有 HTTP 和 HTTPS 请求,并对这些请求进行详细的分析和调试。Charles 支持多种平台,包括 Windows、macOS 和 Linux,广泛应用于网络调试、API 测试和性能优化等场景。
2.2 Charles 的工作原理
- 前置步骤:
- 1)需要运行 Charles 并配置代理;
- 2)在客户端上面需要配置代理。
- 执行步骤:
- 1)[手机] 发起网络请求: 用户在手机上打开浏览器或应用,发起对 Web 服务器的请求;
- 2)[PC 机上的 Charles]: 手机网络请求通过代理设置,发送到 PC 机上运行的 Charles;
- 3)[PC 机上的 Charles] 捕获请求: Charles拦截手机发出的网络请求,并记录相关信息;
- 4)[PC 机上的 Charles] 转发请求到 [互联网/Internet]: Charles 将请求转发到目标Web服务器;
- 5)[互联网/Internet] 传输请求: 请求通过互联网传输到 Web 服务器;
- 6)[Web服务器] 接收并处理请求: Web 服务器接收来自 Charles 的请求,并进行处理;
- 7)[Web服务器] 生成响应: Web 服务器生成响应数据;
- 8)[Web服务器] 将响应发送回 [PC机上的Charles]: Web 服务器将响应数据发送回 Charles;
- 9)[PC 机上的 Charles] 捕获响应: Charles 拦截 Web 服务器的响应,并记录相关信息;
- 10)[PC 机上的 Charles] 转发响应到 [手机]: Charles将响应数据转发回手机;
- 11)[手机] 接收响应并显示内容: 用户在手机上接收到响应数据,并查看网页或应用内容。
2.3 Charles 主要功能
- SSL 代理 – 以纯文本形式查看 SSL 请求和响应;
- 带宽限制用于模拟较慢的互联网连接(包括延迟);
- AJAX 调试 – 以树或文本形式查看 XML 和 JSON 请求和响应;
- AMF – 以树的形式查看 Flash Remoting / Flex Remoting 消息的内容;
- 重复请求以测试后端更改;
- 编辑请求以测试不同的输入;
- 断点来拦截和编辑请求或响应;
- 使用 W3C 验证器验证记录的 HTML、CSS 和 RSS/atom 响应。
2.3 Charles 在移动开发中的应用场景
- Mock 数据:在 API 接口还处于开发阶段时,通过 Charles 的 Mock 功能,可以模拟服务器的响应数据,从而不阻塞前端或移动端的开发流程;
- API 调试:Charles 能捕获和分析移动应用与服务器之间的所有 API 请求,帮助开发者快速定位和解决问题。例如,查看请求参数是否正确,响应数据是否符合预期等;
- 断点调试:通过 Charles 的断点调试功能,开发者可以在请求发送前、中、后暂停请求,进行细粒度的调试;
- 弱网测试:利用 Charles 的网络模拟功能,开发者可以测试应用在不同网络条件下的表现,确保应用在弱网环境下依然能够稳定运行,并提供良好的用户体验;
- 性能优化:通过分析网络请求的时间消耗和数据大小,开发者可以发现性能瓶颈,优化请求频率和数据格式,提高应用的响应速度。
3 安装与配置 Charles
3.1 安装 Charles
3.2 Charles 组件介绍
3.3 配置 Charles 代理
- 启动 Charles 代理服务,并配置端口:
- 访问控制,控制哪个 IP 可以访问到 Charles 代理服务:
3.4 配置移动设备
- 注意:电脑和移动设备必须在同一局域网内,这里以 Android 设备为例;
- Android 手机代理设备:
- 1)查看 Charles 代理服务器的 IP 地址及端口
- 2)手机中选择 "设置" -> "WLAN";
- 3)点击同一个局域网 WIFI;
- 4)在 "代理" 中选择 "手动";
- 5)输入 Charles 代理服务器的 IP 地址及端口,点击 "保存";
- 都配置好后,这个时候您手机进行访问,有可能会弹出如下弹窗,其实就是上面提及过的 "访问控制":
- 这个时候,手机进行网络访问就可以再 Charles 中抓取到报文信息了。
3.5 HTTPS 配置
- 通过上述的配置虽然可以抓取到报文信息,但在进行 HTTPS 访问的时候,所查看到的都是 unknown 和一堆乱码,原因是因为未进行 SSL 先关配置和证书安装;
- 注意:以 Mac + Android 设备为例;
- SSL Proxying Settting 配置:
- Mac 电脑设备证书安装:
- 1)点击 "Help" -> "SSL Proxying" -> "Install Charles Root Certificate":
- 2)此时会弹出要您输入 Mac 密码,然后进行安装到系统重,当安装完成后,在搜索框搜索 "Charles",具体如下所示:
- 3)会看到证书是不被信任的,然后双击证书的名称,打开该证书的信息,展开 "信任",将其切换到 "始终信任":
- 4)然后刷新后,证书就已变成信任的状态了:
- Android 手机设备证书安装:
- 1)点击 "Help" -> "SSL Proxying" -> "Install Charles Root Certificate on a Mobile Device or Remote Browser":
- 2)此时会弹出一个会话框,在您的手机设备上输入其中的网址 chls.pro/ssl,下载证书:
- 3)有的浏览器可能无法下载证书,如小米自带浏览器、QQ浏览器,如果无法下载则更换浏览器即可,当证书下载完成后,然后开始安装证书,至此完成了所有的配置,就可以开始正式抓取 HTTPS 请求了。
4 Charles 高级使用
4.1 Mock 数据
- 在 API 接口还处于开发阶段时,通过 Charles 的 Map Local 功能,可以模拟服务器的响应数据,从而不阻塞前端或移动端的开发流程:
4.2 断点调试
- 选中您想断点调整的请求,然后右键选中 "Breakpoints",然后再次发动请求:
- 再次发送请求:
- 点击 "Execute" 执行结束:
4.3 弱网测试
- 可以模拟不同的网络环境,2G/3G/4G 等: