2021年了Charles为什么依然这么重要

116 阅读2分钟

2021年了Charles为什么依然这么重要

Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers (包含cookies与caching信息)。

Charles有什么用呢

  • 拦截/修改本地请求信息
  • 拦截/修改请求响应信息
  • 作为一个前端er就不需要找后端大大增加/修改测试数据啦

接下来我们来一起搭建一个Charles PC端/移动端环境

1、我们首先去官网下载 www.charlesproxy.com/download/ 2、接下来根据自己安装的版本进行安装 3、打开软件后一定要选择 “grant” 进行授权(当然,选错了也没事,后面还有提示“grant”)
4、打开后界面如下

1631608303408_33E11A18-ECB1-4E99-B6FF-038EAD579D6B.png 5.接下来进入最重要的环境搭建环节 找到菜单栏 Proxy -> Proxy Settings
可直接按照我图中勾选,也可按需勾选

1631608492509_F10CDDBB-60E5-4905-89FE-DD858A8851BB.png

1631608508378_FD141F88-EA86-460F-B802-ECF88D582C26.png

6、接下来需要配置被代理的网址(我们需要抓取/修改信息的网站)
找到菜单栏 Proxy -> SSL Proxying Settings

1631608726527_FB4402FA-3874-4C12-B066-CEFF904D6C81.png 如图中 Location即被代理的网站列表,include为包含,exclude为排除
add配置中可使用通配符“*”来配置host跟port,即全部代理

7、现在已经可以代理简单的http协议网站了。接下来我们来搭建https网站代理环境
在上述的步骤后
找到菜单栏 Help -> SSL Proxying -> install charles root certificate
接着mac电脑会打开钥匙串

1631609047980_CD292E42-8F33-4A99-B10A-1983206862CC.png 点击“添加“输入密码即可,接着按下图配置

1631609188340_8432BB51-8431-468E-9D2F-CCA2135F2500.png

8、到目前位置,pc端代理已经完成。我们已经可以抓取并修改http/https的请求响应数据了。

9.接下来配置手机端环境

0d490a8dbef73de2bf169ee845df8f8f.jpg

a、接着在手机浏览器输入chls.pro/ssl,会提示下载证书,选择下载
b、在设置-通用-描述文件与设备管理,选择下载的证书进行安装
c、信任证书:在 设置-通用-关于本机-证书信任设置

10、配置完成啦

接下来我们就可以随心所欲的抓取数据并修改啦(下面是一个简单的案例讲解)

1631609712467_7A263FC7-9464-4015-B1EA-44E20A8E7A41.png

接下来我们刷新页面,会自动跳转到下面的页面

1631609909797_30054937-F2F4-4D7B-9FC7-FD99EA181FE9.png

修改完毕点击 -> Execute 发送请求

1631610249027_516223EF-86D5-481B-BFBF-A371A6092500.png

修改完毕点击 -> Execute 放行请求 然后我们就会再网站上看到我们修改过的信息啦