charles使用指南

SOLOMEER

已于 2024-11-22 09:24:51 修改

阅读量2.1k

点赞数 31

文章标签： vscode 前端 ide 编辑器 html css3 vue.js

于 2024-11-21 17:44:49 首次发布

本文链接：https://blog.csdn.net/SOLOMEER/article/details/143950723

版权

开发项目的时候，通常是前后端并行开发，因此在联调之前，前端通常会mock一些数据以便调试项目，charles就是一个能对网络请求进行抓包，返回本地数据的软件。

使用指南

1.下载charles软件

进入官网，选择电脑对应的操作系统版本即可，下载安装后运行软件。官方下载网址如下：Download a Free Trial of Charles • Charles Web Debugging Proxy

2. 将charles设置为系统请求代理

Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步是将其设置成系统的代理服务器。启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求，然后在需要将 Charles 设置成系统代理时，选择菜单中的 “Proxy”来将 Charles 设置成系统代理。如下所示：

将charles设置为系统请求代理后，左上角按钮为红色，即可拦截系统中的网络请求，左下角通过filter可以根据域名过滤网络请求。

3. 设置本地映射功能

通过设置本地映射，可以拦截本地发起的请求，并在返回的相应里添加本地数据文件。点击上方工具栏【tools】->【map local setting】，先勾选enable map local，随后点击add按钮添加本地映射，填好相关协议&&域名&&路径。map to 选择拦截请求后返回的数据文件。

对于前端代码来说

import axios  from 'axios';
axios.get('http://localhost.charlesproxy.com:8081/data/userData').then((data)=>{
  console.log(data);
})

本地映射的具体设置如下：

设置完成后，接口能够正常返回本地映射数据，本地调试成功

同时细心的同学可能会提出一个问题：设置本地映射功能的时候为什么域名要加charlesproxy.com？

因为不加的话，无法拦截本地localhost发出的请求，响应显示404，Charles文档中对Localhost存在相关说明，链接如下：https://www.charlesproxy.com/documentation/faqs/localhost-traffic-doesnt-appear-in-charles/。Charles原理是把自身变为一个中间代理服务器，便于抓包。文档大意是某些系统会采用硬编码方式使本地的数据访问不使用代理，导致无法使用Charles重定向。官方给出的解决方案是使用http://localhost.charlesproxy.com/替代localhost。

注意事项

对于http请求来说，本地进行上述设置即可实现网络抓包，对于https请求，由于存在数据存在加密，因此需要先安装证书，点击顶部菜单栏【Help】–>选择【SSL Proxying】，点击【install Charles Root Certificate 】安装Charles根证书即可；

同时charles还支持其他功能：

Rewrite：Rewrite功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的。可以重写接口所有元素的内容：header、host、url、path、query param、response status、body。
Repeat： Charles 的 Repeat 功能能重复发送请求，简单地测试服务器的并发处理能力。
Throttle：Throttle能够设置网络为节流模式，模拟慢速网络情况。
breakpoint：通过breakpoint能够拦截服务器响应，并修改直接修改服务器返回值。可以用于测试页面，测试过程中经常需要测试不同的界面显示，比如名字太长、特殊符号显示，通过breakpoint实现较为方便。

需要的同学可以自行了解（有用的话点个赞把好哥哥们）。