还不会用 Charles?最后一遍了啊!

Charles,一个老生常谈的 HTTP 代理工具。我们平时联调或者定位线上问题都会频繁使用,这次我们再全面性的介绍下它的工作原理和使用场景。

Charles 的工作原理:

HTTP 代理工具,顾名思义它是在客户终端与互联网之间的代理服务器,可以拦截终端发出的 HTTP 请求,对其进行监听、改写等操作。常用于查看移动端请求、mock 接口、修改 HTTP 请求/响应。

安装并配置 Charles HTTPS 代理

鉴于本文的重点是如何使用 Charles,对于如何安装 请点击这里查看教程

  • 需要注意,配置 https 代理时,目前 IOS 已不支持通过打开 Charles 链接的方式下载描述文件,需要将文件下载下来传输到手机中打开。
  • Android 目前只支持代理 HTTP 请求,不支持代理 HTTPS 请求。

如何使用 Charles

Charles 的主界面

先介绍下 Charles 的主界面,其分为两种视图:

  • 一种是Structure View,根据域名路径进行分类,配合 Filter 功能查看特定域名的请求非常有用

  • 一种是 Sequence View,通过时间排序展示,并且显示了 duration。

请求详情

进入请求详情,我们可以查看到请求的全部信息,包括:

  • request 的 headers、cookies、URL payload 和 body 等数据
  • response 的 headers、set-cookie、result 等数据

HTTPS 请求代理

下面我们进行实战,将 https://shopic.sf-express.com/crm/webapp 代理到一个测试地址 http://s.sfjswl.com:10086

Map Remote

第一步,我们通过 Map Remote 能力,将 https://shopic.sf-express.com 域名转发到 http://s.sfjswl.com 域名上。

在 Tools 栏中选择「Map Remote」,不过我更推荐大家使用快捷键 option + command + M,从菜单栏中找这些小工具真的很费眼。。。

这里要注意:

  • 要确认好协议是 http 还是 https,别写错了!
  • Map Remote 只能用于 修改域名,请求路径是不会改变的。

Map Rewrite

因为 Map Remote 只能转发域名,通过第一步我们相当于把 https://shopic.sf-express.com/crm/webapp 代理到了 http://s.sfjswl.com:10086/crm/webapp,然后就需要把 url 中的 /crm/webapp 干掉。

那第二步,我们就可以通过 Map Rewrite 能力,把 /crm/webpapp 替换为 /。它的快捷键是 option + command + R

从上图我们可以看到:

  • 左侧是每个独立配置,可自由开启关闭。
  • 右侧是具体规则,Location 用来匹配路径,匹配后则进行右下角的修改操作
  • Rewrite 的功能非常强大,它可以修改 HTTP 请求的所有信息

这里我们通过 Location 匹配到了 Remote 转发后的 s.sfjswl.com:10086/crm/webapp注意这里要配的是 Remote 之后的地址 )。然后通过改写 path/crm/webapp 干掉,这样我们就顺利把 https://shopic.sf-express.com/crm/webapp 代理到 http://s.sfjswl.com:10086

下面我们再介绍一些 Charles 的常见用法:

mock 接口

承接上文,比如现在我们需要 mock 接口返回数据来还原事故现场,我们可以使用 Charles 的 Map local 功能将后端接口转发到本地的 txt 文件。这个功能的快捷键是 option + command + L

重复发送请求

前后端联调时,后端常会说:"FE再调下接口试试",这时我们就可以通过 Charles 的 Repeat 功能直接发送请求啦!

mock 慢网情况

我们可以通过 Charles 的 Throttle Settings 功能 mock 慢网的情况。它的快捷键是 shift + command + T

Record Settings

我们可以通过 Charles 的 Record Settings功能设置只监听指定域名的请求。它的快捷键是 option + command + R

BreakPoints

我们可以通过 Charles 的 BreakPoints 功能实时拦截请求,并可以修改 request 和 response,类似于 debug 代码

总结

Charles 是一个功能非常强大的 HTTP 代理工具,大大降低了我们调试移动端 h5 和小程序的难度。本文还有一些细节内容未补充比如 path 的路径匹配逻辑、Rewrite 的其他用法等,大家在配置 Charles 的过程中有任何问题欢迎留言交流!

相关推荐
拾光拾趣录14 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃31 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军32 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子35 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游35 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子36 分钟前
智能前端实践之 shot-word demo
前端
归于尽37 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810137 分钟前
vite 插件
前端
无数山39 分钟前
autorelease pool
前端
支撑前端荣耀39 分钟前
四、Cypress测试框架拆解
前端