首页手记 Charles使用教程及Https乱码解决

Charles使用教程及Https乱码解决

标签：

JavaScript

Charles的使用教程

手机端代理工具Charles(俗称花瓶)的详细使用教程及问题解决汇总(v4.2.1，iOS10.3) -- by Qzx

Charles 是在Mac下常用的网络封包截取工具，在移动开发中，通过将自己设置成手机系统的网络访问代理服务器，来截取手机网络接口请求信息，配合 Charles 的 SSL 功能，可分析和查看 Https 协议。

Charles 主要的功能包括：

下载安装包，打开后将 Charles 拖到 Application 目录下完成安装。
启动 Charles 后，第一次 Charles 会请求给它设置系统代理的权限，点击右侧允许按钮，登录密码授予 Charles 该权限。
进入配置项：Proxy --> Proxy Settings... --> Port 默认 8888，将Enable transparent HTTP proxying 前面的选择框勾选。
Charles启动时默认是会抓取Mac 的请求数据包的，可将 macOS Proxy 取消勾选；
取消软件自动检查更新提示：点击 Preferences -> Launch -> Check for updates, 取消勾选；
注意：Chrome 和 Firefox 浏览器默认不使用系统的代理服务器设置，若要截取，需要在 Chrome 中设置成使用系统的代理服务器设置，或直接将代理服务器设置成 127.0.0.1:8888 。

在主界面的中部的 Filter 栏中填入需要过滤出来的关键字
在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”，然后选择 Include 栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了。
在想过滤的网络请求上右击，选择 “Focus”，之后在 Filter 一栏勾选上 Focussed 一项

电脑端Charles设置：在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying”。
手机移动端设置：点击 Charles 的 “Help”->”Local IP Address”，可获取 Charles 运行所在电脑的 IP 地址；在 iPhone 的 “ 设置 “->” 无线局域网 “ 中，可看到当前连接的 wifi 名，通过点击右边的详情键，在其最底部有「HTTP 代理」一项，我们将其切换成手动，然后填上 Charles 运行所在的电脑的 IP，以及端口号 8888。
设置后，打开 iPhone 上的任意需要网络通讯的程序，就可以看到 Charles 弹出 iPhone 请求连接的确认菜单（如下图所示），点击 “Allow” 即可完成设置。

截取 Https 通讯信息

说明：Https 协议属于加密协议，要想截取分析 Https 协议相关的内容，需要安装 Charles 的 CA 证书。具体步骤如下：图片部分可参考细说 Charles 配置 HTTPS 代理的乱码问题

Proxy –> SSL Proxying Setting –> Enable SSL Proxying 点击 Add，编辑Location，输入 Host: * , Port: 443，点击 OK。
PC 端证书安装：Help –> SSL Proxying –> Install Charles Root Certificate，选择 Charles 的证书，并信任此证书。
移动端证书安装：Help –> SSL Proxying –>Install Charles Root Certificate on a Mobile Device，安装弹出的对话框要求，手机配置好端口为 8888 的代理之后，在手机浏览器访问 http://chls.pro/ssl 就可以下载证书并安装了。
安卓手机安装证书 Help –> SSL Proxying –>Save Charles Root Certificate...，选择要保存的文件目录，点击 Save, 将保存的文件传到手机，点击手机的 设置 -> WLAN -> 高级设置 -> 安装证书，找到文件保存目录，安装完成。
注意：对于 iOS 10.3以上的手机需要设置证书信任：点击 通用 -> 关于本机 -> 证书信任设置 -> 选择 Charles 的证书打开。

模拟慢速网络

在 Charles 的菜单上，选择 “Proxy”->”Throttle Setting” 项，在之后弹出的对话框中，我们可以勾选上 “Enable Throttling”，并且可以设置 Throttle Preset 的类型。
若只想模拟指定网站的慢速网络，可以再勾选上图中的 “Only for selected hosts” 项，然后在对话框的下半部分设置中增加指定的 hosts 项即可。

修改网络请求，多次发送接口请求

需求：为调试服务器的接口，需反复尝试不同参数的网络请求，Charles 可方便地提供网络请求的修改和重发功能。
在已发送的网络请求上面点击右键，选择"Compose"，即可创建一个可编辑的网络请求，可以修改该请求的任何信息，包括 URL 地址、端口、参数等，之后点击 “Execute” 即可发送该修改后的网络请求，这对于我们和服务端调试接口非常方便。

反向代理

Charles的反向代理功能允许我们将本地的端口映射到远程的另一个端口上，例，将本机的 61234 端口映射到了远程（lyun012.cn）的80端口上了。这样，当我访问本地的 61234 端口时，实际返回的内容会由 lyun012.cn 的 80 端口提供。
选择 “Proxy”->”Reverse Proxies Settings” 项，勾选Enable Reverse Proxies，点击Add 添加需要代理的网址及端口。

修改服务器返回内容

很多时候，我们只是想临时修改一次网络请求结果，最好通过 Breakpoints 实现。
Breakpoints 功能类似我们在 Xcode 中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求，这个时候，我们可以在 Charles 中临时修改网络请求的返回内容。
在 Charles 的菜单中，选择 “Proxy”->”Breakpoint Settings” 进入设置页面。
点击六边形图标可以控制断点的开启和断开。

需求：Rewrite 功能功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的，例如：一个 API 请求是获得用户昵称，而我当前的昵称是 “tangqiaoboy”，我们想试着直接修改网络返回值，将 tangqiaoboy 换成成 iosboy，适用于批量和长期的替换。
在 Charles 的菜单中，选择 “Tools”->“Rewrite Settings”，勾选"Enable Rewrite"，点击Add。