首发于 樊浩柏科学院
Charles 是在 Mac 下经常使用的截取网络封包的工具(Win 环境也已支持),在移动端开发过程当中,咱们常须要截取网络包分析服务端的通信协议。Charles 将本身设置成系统的网络访问代理服务器,不只能够提供 SSL 代理,还支持流量的控制、支持重发网络请求、支持修改网络请求参数、支持网络响应截获并动态修改。html
从 Charles 的 官方网站 下载最新的安装包,下载晚完成安装便可。浏览器
Charles 是付费软件,固然免费状态也可使用。可使用以下信息完成注册:服务器
Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4
若是注册失败,能够尝试 这种方法。网络
因为 Charles 是经过将本身设置成代理服务器来完成封包截取的,因此第一步是须要将 Charles 设置成系统的代理服务器。并发
启动 Charles 后,菜单中的 “Proxy” -> “Windos Proxy(或者Mac OS X Proxy)”, 来将 Charles 设置成系统代理。以下所示:工具
配置后,就能够在界面中看到截取的网络请求。可是,Chrome 和 Firefox 浏览器默认并不使用系统的代理服务器设置, 因此须要将 Chrome 和 Firefox 设置成使用系统的代理服务器,或者直接设置成地址127.0.0.1:8888
。测试
若是 Chrome 已安装了 Host Switch Plus 插件,则须要暂时关闭。网站
通常状况下,咱们只须要监听指定服务器上发送的请求,可使用以下办法解决:spa
fanhaobai
,则过滤输出只包含 fanhaobai 信息的请求。方式 1 和方式 3 能够快速地过滤临时性网络请求,使用方式 2 过滤永久性网络请求。插件
Charles 除了能够截取本地的网络包,做为代理服务器后,一样能够截取移动设备的网络请求包。
截取移动设备网络包时,须要先将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy” -> ”Proxy Settings”,填入默认代理端口 8888,且勾选 “Enable transparent HTTP proxying” 就完成了设置。以下图所示:
首先,经过 Charles 的顶部菜单的 “Help” -> ”Local IP Address” 获取本地电脑的 IP 地址,例如个人本机电脑为192.168.1.102
。
在 iPhone 的 ”设置“ -> ”无线局域网“ 中,对当前局域网链接设置 HTTP 代理(端口默认为 8888),以下图:
设置完成后,打开 iPhone 的任意程序,在 Charles 就能够弹出链接确认窗口,点击 ”Allow” 便可。
在 Android 上操做同 iPhone,只是某些系统设置方式不一致而已。
若是须要截取并分析 Https 协议信息,须要安装 Charles 的 CA 证书。
点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”,便可完成证书的安装。以下图所示:
建议将证书安装在 ”受信任的根证书颁发机构“ 存储区。
特别说明,即便安装完证书后,Charles 默认是不会截取 Https 网络通信的信息。对于须要截取分析站点 Https 请求,能够右击请求记录,选择 SSL proxy 便可,如图所示:
若是在 iPhone 或 Android 机器上截取 Https 协议的通信内容,须要手机上安装相应的证书。点击 Charles 的顶部菜单,选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”,而后按照 Charles 的提示的安装教程安装便可。以下图所示:
在上述 截取移动设备网络包 为手机设置好代理后,手机浏览器中访问地址http://chls.pro/ssl
,便可打开证书安装的界面。安装完证书后,就能够截取手机上的 Https 通信内容了。注意,一样须要在要截取的网络请求上右击,选择 SSL proxy 菜单项。
若是 SSL proxy 后出现以下错误:
可将证书设置为信任便可,例如 iPhone 下 “设置” -> “通用” -> “关于本机” -> “证书信任设置” 下:
在作 App 开发调试时,常常须要模拟慢请求或者高延迟网络,以测试应用在网络异常状况变现是否正常,而这使用 Charles 就轻松帮咱们完成。
在 Charles 的菜单上,选择 “Proxy” -> ”Throttle Setting” 项,在弹出的窗口中,能够勾选上 “Enable Throttling”,而且能够设置 Throttle Preset 的类型。以下图所示:
固然能够经过 “Only for selected hosts” 项,只模拟指定站点的慢请求。
有时为了调试服务端的接口,咱们须要反复尝试不一样参数的网络请求。Charles 能够方便地提供网络请求的修改和重发功能。只需在该网络请求上点击右键,选择 “Compose”,便可建立一个可编辑的网络请求。
咱们能够修改该请求的任何信息,包括 URL 地址、端口、参数等,以后点击 “Execute” 便可发送该修改后的网络请求。Charles 支持咱们屡次修改和发送该请求,这对于咱们和服务器端调试接口很是方便,以下图所示:
有候为方便咱们调试一些特殊状况,须要服务器返回一些特定的响应内容。例如数据为空或者数据异常的状况,部分耗时的网络请求超时的状况等。一般让服务端配合,构造相应的数据显得会比较麻烦,这个时候,使用 Charles 就能够知足咱们的需求。
根据不一样的场景需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,均可以达到修改服务器返回内容的目的。这三者在功能上的差别是:
Charles 的 Map 功能分 Map Remote 和 Map Local 两种。Map Remote 是将指定的网络请求重定向到另外一个网址请求地址,而 Map Local 是将指定的网络请求重定向到本地文件。在 Charles 的菜单中,选择 “Tools” -> ”Map Remote” 或 “Map Local” ,便可进入到相应功能的设置页面。
对于 Map Remote 功能(选中 Enable Map Remote),咱们须要填写网络重定向的源地址和目的地址,对于其余非必需字段能够留空。下图是一个示例,我将测试环境t.fanhaobai.com
的请求重定向到了生产环境www.fanhaobai.com
。
对于 Map Local 功能(选中 Enable Map Local),咱们须要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果,咱们能够先使用 Charles 提供的 “Save Response…” 功能,将请求结果保存到本地并稍加修改,成为咱们的目标映射文件。
Rewrite 功能功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。
例如,将服务端返回的www.fanhaobai.com
所有替换为www.baidu.com
,以下:
将响应中的www.fanhaobai.com
所有替换为www.baidu.com
。因而在 “Tools” -> "Rewrite" 下配置以下的规则:
选中 “Enable Rewrite” 启用 Rewrite 功能 ,响应以下:
上面提供的 Rewrite 功能最适合作批量和长期的替换,可是不少时候,咱们只是想临时修改一次网络请求结果,这个时候,咱们最好使用 Breakpoints 功能。
在须要打断点的请求上右击并选择 “Breakpoints”,从新请求该地址,能够发现客户端被挂起,Charles 操做界面以下:
此时能够修改请求信息,但这里只修改响应信息,故点击 “Execute” 后选择 “Edit Response” 项,修改 title 为fanhaobai.com
,以下:
继续点击 “Execute” ,可看见响应的 title 已经变为fanhaobai.com
。
咱们可使用 Charles 的 Repeat 功能来简单地测试服务器的并发处理能力。在想压测的网络请求上右击,而后选择 "Repeat Advanced” 项,以下所示:
这样咱们就能够在上图的对话框中,选择压测的并发线程数以及压测次数,肯定以后,便可开始压力测试了。
Charles 的反向代理功能容许咱们将本地的端口映射到远程的另外一个端口上。