Charles 在移动开发中的应用

9 阅读6分钟

Charles 在移动开发中的应用

1 引言

  • 随着移动应用的普及和发展,开发者面临着越来越复杂的网络调试任务。Charles 作为一款功能强大的网络调试代理工具,能够帮助开发者轻松捕获和分析网络请求,模拟不同的网络环境,从而优化移动应用的性能和稳定性。本文将详细介绍 Charles 在移动开发中的应用场景和使用方法。

2 Charles 简介

2.1 什么是 Charles?

  • Charles 是一款跨平台的 HTTP 代理 / HTTP 抓包工具。它可以捕获设备发出的所有 HTTP 和 HTTPS 请求,并对这些请求进行详细的分析和调试。Charles 支持多种平台,包括 Windows、macOS 和 Linux,广泛应用于网络调试、API 测试和性能优化等场景。

2.2 Charles 的工作原理

image1.png

  • 前置步骤
  • 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 组件介绍

image2.png

3.3 配置 Charles 代理

  • 启动 Charles 代理服务,并配置端口: image3.png
  • 访问控制,控制哪个 IP 可以访问到 Charles 代理服务: image4.png

3.4 配置移动设备

  • 注意:电脑和移动设备必须在同一局域网内,这里以 Android 设备为例;
  • Android 手机代理设备:
  • 1)查看 Charles 代理服务器的 IP 地址及端口
  • 2)手机中选择 "设置" -> "WLAN";
  • 3)点击同一个局域网 WIFI;
  • 4)在 "代理" 中选择 "手动";
  • 5)输入 Charles 代理服务器的 IP 地址及端口,点击 "保存"; image5.png image6.png image7.png
  • 都配置好后,这个时候您手机进行访问,有可能会弹出如下弹窗,其实就是上面提及过的 "访问控制": image8.png
  • 这个时候,手机进行网络访问就可以再 Charles 中抓取到报文信息了。

3.5 HTTPS 配置

  • 通过上述的配置虽然可以抓取到报文信息,但在进行 HTTPS 访问的时候,所查看到的都是 unknown 和一堆乱码,原因是因为未进行 SSL 先关配置和证书安装;
  • 注意:以 Mac + Android 设备为例;
  • SSL Proxying Settting 配置: image9.png
  • Mac 电脑设备证书安装:
  • 1)点击 "Help" -> "SSL Proxying" -> "Install Charles Root Certificate": image10.png
  • 2)此时会弹出要您输入 Mac 密码,然后进行安装到系统重,当安装完成后,在搜索框搜索 "Charles",具体如下所示: image11.png
  • 3)会看到证书是不被信任的,然后双击证书的名称,打开该证书的信息,展开 "信任",将其切换到 "始终信任": image12.png
  • 4)然后刷新后,证书就已变成信任的状态了: image13.png
  • Android 手机设备证书安装:
  • 1)点击 "Help" -> "SSL Proxying" -> "Install Charles Root Certificate on a Mobile Device or Remote Browser": image14.png
  • 2)此时会弹出一个会话框,在您的手机设备上输入其中的网址 chls.pro/ssl,下载证书: image15.png
  • 3)有的浏览器可能无法下载证书,如小米自带浏览器、QQ浏览器,如果无法下载则更换浏览器即可,当证书下载完成后,然后开始安装证书,至此完成了所有的配置,就可以开始正式抓取 HTTPS 请求了。

image16.jpg

4 Charles 高级使用

4.1 Mock 数据

  • 在 API 接口还处于开发阶段时,通过 Charles 的 Map Local 功能,可以模拟服务器的响应数据,从而不阻塞前端或移动端的开发流程: image17.png image18.png

4.2 断点调试

  • 选中您想断点调整的请求,然后右键选中 "Breakpoints",然后再次发动请求: image19.png
  • 再次发送请求: image20.png
  • 点击 "Execute" 执行结束: image21.png

4.3 弱网测试

  • 可以模拟不同的网络环境,2G/3G/4G 等: image22.png

5 参考文档

Charles 官网