Web调试工具Charles使用心得

目录

• 一、安装与使用
• 二、抓手机的请求包
  • http请求抓包
  • https请求抓包
    • iPhone手机抓https包
    • 安卓&＃xff08;小米&＃xff09;手机抓https包
• 三、用本地文件替换线上文件
  • 替换测试环境的文件
  • 替换生产环境的文件&＃xff08;跨域&＃xff09;
• 四、其他
  • 筛选指定域下的请求
• 参考文档

&＃64;蒋欢&＃xff0c;美团点评前端工程师&＃xff0c;2年工作经验&＃xff0c;主要负责大众点评“点餐H5"和"美团点评智慧餐厅"小程序的开发。本文首发于 蒋欢的知乎专栏 &＃xff0c;敬请关注。

正文从这开始&＃xff5e;

Charles 是一个网络代理工具&＃xff0c;经常用来进行 Mac 下的 Web 调试工作&＃xff0c;功能类似于 Windows 环境下的 Fiddler 工具。因为工作中经常会用到&＃xff0c;所以决定写一篇总结文章。

注意&＃xff0c;这一篇文章主要用来记录在使用过程中遇到的疑难问题和解决方法。常规的 Charles 安装与使用方法请查阅文末的 参考文档 &＃xff0c;本文不再详述。

一、安装与使用

从Charles 官网下载 并安装软件包。

基本的使用方法本文就不作介绍了&＃xff0c;如果不清楚的话&＃xff0c;请移步这篇 网络教程 &＃xff0c;写的十分详细。

下面具体分析在使用中遇到的问题。

二、抓手机的请求包

http请求抓包

首先&＃xff0c;需要获取本机的 IP 地址。

打开 Charles 后&＃xff0c;在 Help 选项下选择 Local IP Address 可以看到本机的 IP 地址。如果获取的是 IPv6 地址。也可以按住 Mac 上的 option 键点击 WIFI 图标获得 IPv4 格式地址。如下图所示&＃xff1a;

在 iPhone 上的 WIFI 手动设置 HTTP 代理&＃xff0c;服务器地址为电脑的 IP 地址&＃xff0c;端口号为8888。 然后在 Charles 的工具栏上打开 Recording 按钮&＃xff0c;用手机浏览器访问页面或打开 App&＃xff0c;在 Charles 中即可看到 http 请求包。

https请求抓包

iPhone手机抓https包

iPhone 抓取 https 的包&＃xff0c;网上配置很多&＃xff0c;这里就不详细介绍了&＃xff0c;附 网络教程 供大家参考。

补充两点技巧&＃xff1a;

• 技巧1&＃xff1a;按以上操作设置后&＃xff0c;如果 iPhone 抓取 https 请求包时显示 unknown。
  则说明Charles的证书在只在本机安装了&＃xff0c;但还未被设为信任&＃xff0c;需要按照此步骤进行设置&＃xff1a;通用 —> 关于本机 —> 证书信任设置 —> CA勾选。

• 技巧2&＃xff1a;针对 Proxy —> SSL Proxying Settings 的配置地址&＃xff0c;如果不想每个域名都设置一次&＃xff0c;可以直接把 Host 和 Port 都设为 *&＃xff0c;允许抓取所有域名的请求包。

安卓&＃xff08;小米&＃xff09;手机抓https包

安卓手机的抓包与 iPhone 相似&＃xff0c;都需要按照以下4步来抓 https 请求包&＃xff1a;

1. 电脑装证书
2. 移动设备安装证书
3. Charlse 添加 SSL Proxying
4. 手机使用 Mac 代理访问目标域名

补充两种安装失败情况及解决办法

• 情况1&＃xff1a;若遇到在模拟器/手机的浏览器中输入 charlesproxy.com/getssl 不是弹一个框&＃xff0c;而是出现了下图的情况&＃xff0c;可能是因为手机没有将电脑的 IP 地址设为代理&＃xff08;端口号为8888&＃xff09;

• 情况2&＃xff1a;小米手机安装证书提示**“没有可安装的证书”**&＃xff0c;解决方式&＃xff1a;

a、打开 Charles 的 HELP -> SSL Proxying -> Export Charles Root Certification and Private Key&＃xff0c;输入任意密码&＃xff0c;导出 pem 文件。

b、导出后&＃xff0c;用微信或者其他方式将 pem 文件传到安卓手机里。在 WLAN设置 —> 安装证书里打开该文件&＃xff0c;输入导出时设置的密码就行了。

例如通过微信方式传递的文件路径为&＃xff1a;WLAN -> 高级设置 -> 安装证书 -> Tencent文件夹 -> MicroMsg文件夹 -> Download文件夹

Charles原理解析

Charles 抓包安装的证书&＃xff0c;电脑和手机是配对的。不管是通过访问 charlesproxy.com/getssl&＃xff08;因为 Mac 已经开启代理&＃xff0c;所以访问这个地址实际上返回的是本机的 Charles 证书&＃xff0c;而并没有访问 charlesproxy.com 这个网站&＃xff09;&＃xff0c;还是通过手动安装&＃xff0c;实际上安装的都是对应本机的 SSL 证书。所以如果安装证书的手机和电脑不是配对关系的话&＃xff0c;即使两者都有证书也是不能抓包的。

三、用本地文件替换线上文件

替换测试环境的文件

a、首先需要 Chrome 安装 Proxy SwitchyOmega 插件并配置 Charles 代理&＃xff0c;这样 Chrome 下的链接才会走 Charles 发送。

b、打开Charles&＃xff0c;选择 Tools —> No caching Seting&＃xff0c;勾选 Enable No Caching&＃xff0c;确保不会因为文件缓存影响代码生效。

另外&＃xff0c;Chrome 控制面板里的 Network 设置&＃xff0c;最好也勾选 Disable Cache 选项。这样可以在浏览器调试阶段也不启用缓存&＃xff0c;防止修改了代码&＃xff0c;但因为浏览器缓存而未生效。

c、单个文件的替换。选择 Tools —> Map Local Settings 将线上文件映射到本地文件, 点击选择要替换的文件(例如&＃xff1a;mm-order-list.*.js)。Protocol 如果置空&＃xff0c;则默认匹配所有协议。
注意&＃xff1a;webpack打包的项目可能还需要根据实际情况映射公共文件&＃xff0c;如 manifest.*.js 和 common.*.js 才可以完成替换。

d、文件夹整体替换。按照步骤c&＃xff0c;我们已经可以进行单文件替换了&＃xff0c;但单独设置太麻烦。所以我们直接进行文件夹整体替换。以配置 app-menuorder-h5 的项目为例&＃xff0c;Host 和 Local Path 配置如下图所示:

配置完本地文件映射 Map Local Settings 后&＃xff0c;还需要配置 Rewrite 选项&＃xff0c;实现对文件的重写替换。通过正则表达式来替换对应目录下所有文件。

e、最后&＃xff0c;刷新浏览器&＃xff0c;如果 http 请求的 Respone Header 里有 X-Charles-Map-Local 字段则代表本地文件替换成功。

替换生产环境的文件&＃xff08;跨域&＃xff09;

用本地文件替换生产环境的文件同样需要设置 Map Local Settings 和 Rewrite Settings 两项。

a、设置 Map Local Settings 进行文件目录映射&＃xff0c;只需要把 Host 改成静态文件存储的域名即可&＃xff0c;本例 Host: www.dpfile.com

b、设置 Rewrite Settings&＃xff0c;这里需要分成两步&＃xff1a;

第一步&＃xff0c;指定替换文件&＃xff0c;注意线上的文件因为被压缩过&＃xff0c;所以文件名中可能会有 “min” 字段。

第二步&＃xff0c;由于 m.dianping.com 引用映射后的 www.dpfile.com 域下的文件&＃xff0c;从而导致跨域问题。

请注意这里需要分情况讨论&＃xff1a;

• 情况1&＃xff1a;Response Header 不包含 Access-Control-Allow-Origin 与 Access-Control-Allow-Credentials 字段&＃xff0c;则需手动添加这两个字段。

所以需要对 dpfile.com 域下的 Response Header 添加字段 Access-Control-Allow-Credentials: true 与 Access-Control-Allow-Origin: *&＃xff0c;从而允许 dpfile.com 域下的文件被其他域所引用。

• 情况2&＃xff1a;Response Header 如已包含 Access-Control-Allow-Origin 字段&＃xff0c;则只需添加 Access-Control-Allow-Credentials。不能再添加 Access-Control-Allow-Origin&＃xff0c;否则会报错。

按以上配置设置完毕后&＃xff0c;即可用本地文件替换生产环境线上文件&＃xff1a;&＃xff09;

四、其他

筛选指定域下的请求

由于 Charles 会抓取手机发出的全部请求包&＃xff0c;为了能快速定位我们需要的请求&＃xff0c;可以对 Charles 的抓包请求进行筛选&＃xff0c;具体方法是&＃xff1a;Setting —> Recording Setting —> Include&＃xff0c;设置只展示特定域的请求包。

参考文档

• 详解Charles
• iPhone安装charles
• Charles抓取https时一直显示unknown
• Charles https抓包 — Android —— 美团谢敏