文章目录一、Charles 是什么Charles 的主要功能二、安装与配置1. 下载与安装2. SSL 证书配置抓 HTTPS 必备3. 白名单的访问4. 录制5. 并发测试幂等性测试6. 请求编辑7. 手机端抓包配置三、基本使用1. 弱网测试2. 1.断点调试四、Mock数据4.1 定义4.2 用途一软件开发中的单元测试1. 隔离依赖2. 控制测试场景二前端与后端开发的协作1. 并行开发2. 定义接口规范三演示和原型制作1. 快速原型功能2. 保护数据隐私五 、常用操作速查表六、 App 抓包一、Charles 是什么Charles 是一个HTTP 代理服务器、HTTP 监视器、反向代理能够查看其机器和 Internet 之间的所有 HTTP 和 SSL/HTTPS 流量包括请求、响应和 HTTP 标头含 cookie 和缓存信息。在做移动开发时为了调试与服务器端的网络通讯协议可以使用 Charles 截取网络封包进行分析。Charles 通过将自己设置成系统的网络访问代理服务器使得所有的网络访问请求都通过它来完成从而来实现网络封包的截取和分析。配合 SSL 功能Charles 还可以分析 HTTPS 协议。HTTP的不足:HTTP传输的是明文所有数据都可以被第三方拦截、查看。没有数据加密或数据校验容易被中间人攻击。HTTPS的工作原理:HTTPS在HTTP的基础上增加了SSL/TLS协议用于加密传输。SSL/TLS通过对称加密和非对称加密结合确保数据在传输过程中不会被拦截和篡改。举例说明:访问银行网站或支付宝等涉及到支付的页面说明如何通过浏览器锁标记识别HTTPS安全连接。Charles 的主要功能SSL 代理– 以纯文本形式查看 SSL 请求和响应带宽限制– 模拟较慢的互联网连接包括延迟AJAX 调试– 将 XML 和 JSON 请求和响应视为树或文本AMF– 以树的形式查看 Flash 远程处理/Flex 远程处理消息的内容重复请求– 测试后端更改编辑请求– 测试不同的输入断点– 拦截和编辑请求或响应W3C 验证器– 验证记录的 HTML、CSS 和 RSS/atom 响应二、安装与配置1. 下载与安装从 Charles 官网,选择自己的操作系统进行下载。下载后双击执行按照提示安装完成即可。Charles官网 一般下载后有 30 天试用期。2. SSL 证书配置抓 HTTPS 必备第一步安装根证书打开 Charles点击菜单栏Help → SSL Proxying → Install Charles Root Certificate安装 Charles 根证书按照提示将证书安装到系统的受信任证书存储区第二步开启 SSL 代理点击Proxy → SSL Proxying Setting勾选Enable SSL Proxying点击 AddHost 填*Port 填*配置完成后就可以抓到 HTTPS 的数据包了。3. 白名单的访问4. 录制打开 Charles 后点击顶部工具栏的红色圆点开始录制。操作浏览器或 App 触发请求后左侧面板会显示所有网络请求。左侧面板顶部可切换两种视图模式Structure按域名排列Sequence按时间顺序排列5. 并发测试幂等性测试用Repeat Advanced狂发 N 次请求本质上就是在模拟“手抖/网络重试/快速连点”。总结起来就测这3 种场景下单/付款防多扣钱连续发 5 次。看结果——必须只扣 1 次钱后续 4 次返回“订单已处理”或“请勿重复提交”。减库存/领券防超卖瞬间并发发 10 次。看结果——库存只减 1 件券只发 1 张绝不能出现负数或多发。取消/删除防报错先发一次取消再发一次取消。看结果——第二次绝不能报“404 不存在”或系统崩溃必须返回“当前已是取消状态”静默成功。一句话定论测完后数据库里绝不能多出一条重复数据服务器也绝不能崩溃或报 5xx 错误这就达标了。6. 请求编辑7. 手机端抓包配置第一步获取电脑 IP打开 Charles点击Help → Local IP Address获取 IP 地址也可以用ipconfig命令查看第二步设置代理端口点击Proxy → Proxy Settings设置端口默认为 8888注意要选一个没有被占用的端口第三步手机配置代理确保手机和电脑连接同一个 Wi-Fi打开手机 Wi-Fi 设置点击连接的 Wi-Fi 网络 → 代理选择手动代理服务器地址填电脑 IP端口填 8888保存即可第四步手机安装 SSL 证书如果抓不到 HTTPS 包需要给手机也安装证书点击Help → SSL Proxying → Install Charles Root Certificate On a Mobile Device or Remote Browser在手机浏览器中输入图片中的网址chls.pro/ssl下载并安装证书三、基本使用常规的抓包测试过滤请求获取我们需要的请求找到我们需要的返回数据进行数据的校验1. 弱网测试弱网、2G、3G、4G、5G、自定义网络状况手机端支付请求的时候在弱网情况有丢包有带宽不够的测试条件下我们必须保证在弱网的情况下数据不会错乱不会发送异常数据给到服务端如果服务端不做异常的校验和处理把这些异常数据加到后台直接记录下来。可能会导致一些异常的数据问题严重的可能会崩溃。弱网测试的目的不是为了帮用户提高网速。我们是需要保证在弱网情况下不会有异常情况发生我们直接返回网络不佳请稍后重试。下载数据的时候网络丢包网络变卡是不是保证数据的正确。测完才知道下完的数据不对漏了数据少了。提出bug开发进行这种场景的处理。2. 1.断点调试设置断点:右键请求Breakpoints启用断点。修改请求/响应:触发请求后可在断点处修改参数或响应内容。四、Mock数据4.1 定义Mock数据是模拟的数据它是在软件开发、测试以及一些数据分析场景中为了替代真实数据而创建的数据集合。这些数据并非从实际的生产环境或真实数据源获取而是人工构造或者通过工具生成旨在模拟真实数据结构的结构、格式和行为以满足特定的开发、测试或演示需求。如果要测试一些接口的数据场景问开发你帮我弄一下返回一下我指定数据我看看情况难开口自己改改管理后台的数据可能需要大量的配置修改的数据然后会真实的记录到后台里去数据库操作麻烦新增一些测试数据到测试环境前端dom文件修改简单修改的只是前端部分的数据一次性通过抓包工具进行数据 mock通过map_local的方式修改返回的数据直接存放在本地当客户端请求对应的接口的时候直接讲储存好的数据返回给客户端通过断点的方式可以快速即时的修改你想要的数据。4.2 用途一软件开发中的单元测试1. 隔离依赖在编写单元测试时被测试的单元如函数、类方法等可能依赖于外部系统或服务例如数据库、网络API等。如果直接使用真实的外部依赖可能会导致测试结果不稳定如网络波动影响API调用结果并且可能会对外部系统造成不必要的负担。通过使用Mock数据可以将被测试单元与外部依赖隔离开来。例如当测试一个与数据库交互的函数时可以使用Mock数据模拟数据库的查询结果这样就可以专注于测试函数本身的逻辑而不必担心数据库的实际状态和连接问题。2. 控制测试场景Mock数据允许开发人员精确地控制输入和预期输出。在测试中可以根据不同的测试用例创建不同的Mock数据以模拟各种可能的情况。例如测试一个处理用户登录的函数时可以创建不同的Mock用户数据包括正确的用户名和密码组合、错误的用户名、错误的密码等从而全面测试函数在各种登录场景下的行为。二前端与后端开发的协作1. 并行开发在前端和后端团队并行开发时后端API可能还没有完全开发完成。前端开发人员可以使用Mock数据模拟后端API的响应这样就可以独立于后端进行前端界面的开发和调试。例如前端开发一个用户注册页面在后端注册接口尚未可用时前端可以使用Mock数据模拟注册成功或失败的响应从而继续构建和优化注册页面的用户交互逻辑。2. 定义接口规范Mock数据可以作为一种方式来定义前端和后端之间的接口规范。通过创建具有代表性的Mock数据明确数据的结构、字段名称、数据类型等信息前端和后端开发人员可以在接口开发之前就达成共识。例如对于一个获取用户信息的API后端开发人员可以提供“Mock的用户信息数据结构包括用户ID、姓名、年龄、地址等字段前端开发人员可以根据这个Mock数据来确定如何在界面上展示用户信息从而避免在接口对接时出现数据结构不匹配的问题。三演示和原型制作1. 快速原型功能在项目的早期阶段如进行项目演示或制作原型时可能还没有真实的数据可供使用。Mock数据可以快速构建出看起来像真实应用的演示版本。例如在向客户展示一个新的电商应用的概念时可以使用Mock数据来填充商品列表、用户订单等信息让客户能够直观地看到应用的功能和界面布局而不必等待实际数据的收集和录入。2. 保护数据隐私在某些情况下如向外部合作伙伴展示应用的部分功能但又不想暴露真实数据可能涉及商业机密或用户隐私时Mock数据是一种很好的解决方案。例如金融机构向第三方展示其理财应用的界面和功能但使用Mock数据来代替真实的客户账户余额、交易记录等敏感信息。五 、常用操作速查表功能操作开始/停止抓包点击顶部工具栏红色圆点清空请求列表点击小扫把图标过滤请求左侧 Filter 输入框输入关键词查看请求详情点击请求 → 右侧 Overview/Contents/TimingHTTPS 抓包配置Help → SSL Proxying → Install Root Certificate Proxy → SSL Proxying Settings 添加*:443获取电脑 IPHelp → Local IP Address手机抓包手机连同一 Wi-Fi → 设代理为电脑 IP:8888 → 手机访问 chls.pro/ssl 装证书弱网测试Proxy → Throttle Setting → 勾选 Enable ThrottleMock 数据右键请求 → Map Local → 选本地文件断点修改右键请求 → Breakpoints → Proxy → Breakpoints Setting解决 localhost 抓不到hosts 文件添加127.0.0.1 http://localhost.charlesproxy.com/六、 App 抓包手机端安装证书,手机打开浏览器输入chls.pro/ssl安装证书完成手机端代理和证书配置后打开今日头条 App在 Filter 中尝试搜索article、news、feed、video等关键词来定位不同的接口。⚠️注意今日头条等大型 App 可能使用了SSL Pinning证书绑定技术会拒绝 Charles 的代理证书。如果遇到抓不到包或显示 unknown 的情况请检查证书是否正确安装并信任。如果还是不行可能需要更高级的方案。核心原则不变Charles 是中间人所有请求和响应都经过它所以你可以看、可以改、可以挡。多动手试试很快就能上手。