Charles 是一个强大的 HTTP 调试代理工具,它可以帮助开发者查看、记录和调试 HTTP 和 HTTPS 请求。在本教程中,我们将介绍如何使用 Charles 代理来捕获和测试本地开发服务器的请求。
引言 Charles 代理的安装与初始化
Charles是一切工作的起点,我们需要下载并安装 Charles 代理。可以从 Charles 官网 下载适合你操作系统的版本。
下载地址:Download a Free Trial of Charles • Charles Web Debugging Proxy
抢先永久免费体验方法:进入网址,输入任意注册名生成lincense key
https://tools.zzzmode.com/mytools/charles/
点击注册,输入相关信息即破解成功
1. 确认 Charles 代理正在运行
确保 Charles 代理已经启动并正在监听默认端口(8888)。在 Charles 的界面中,应该能够看到类似以下信息:
Proxy: 127.0.0.1:8888
2. 确认浏览器代理设置
配置系统代理
Windows:
- 打开
控制面板
->网络和共享中心
->Internet 选项
。 - 选择
连接
标签,然后点击局域网设置
。 - 勾选
为 LAN 使用代理服务器
,输入地址127.0.0.1
和端口8888
,然后点击确定
。
macOS:
- 打开
系统偏好设置
->网络
。 - 选择当前网络连接(例如 Wi-Fi),点击
高级
。 - 选择
代理
标签,勾选Web 代理 (HTTP)
和安全 Web 代理 (HTTPS)
,输入地址127.0.0.1
和端口8888
,点击确定
。
配置浏览器代理
Google Chrome:
- 打开 Chrome,点击右上角的菜单按钮,然后选择
设置
。 - 向下滚动并点击
高级
。 - 在
系统
部分,点击打开计算机的代理设置
。 - 按上述系统代理配置步骤进行设置。
Mozilla Firefox:
- 打开 Firefox,点击右上角的菜单按钮,然后选择
选项
。 - 在
常规
面板中,向下滚动到网络设置
部分,点击设置
。 - 选择
手动代理配置
,输入HTTP 代理
和HTTPS 代理
的地址127.0.0.1
和端口8888
,点击确定
。
附:谷歌浏览器可以直接使用SwitchyOmega插件进行浏览器代理,避免后续反复改配置
SwitchyOmega 代理教程
-
安装 SwitchyOmega 扩展
- 在 Chrome Web Store 中搜索并安装 SwitchyOmega 扩展。
-
创建新情景模式
- 打开 SwitchyOmega 扩展,点击
选项
进入配置页面。 - 在左侧菜单中选择
情景模式
,然后点击新建情景模式
。 - 输入情景模式名称(例如
Charles Proxy
),选择代理服务器情景模式
,然后点击创建
。
- 打开 SwitchyOmega 扩展,点击
-
配置代理服务器
- 在新创建的情景模式(例如
Charles Proxy
)中,选择服务器
选项卡。 - 在
协议
下拉菜单中选择HTTP
。 - 在
服务器
输入框中输入127.0.0.1
。 - 在
端口
输入框中输入8888
。 - 确保
启用
复选框被选中。 - 点击
保存
按钮保存设置。
- 在新创建的情景模式(例如
-
配置自动切换规则
- 返回 SwitchyOmega 主页面,选择
自动切换
。 - 在右侧的
规则列表
部分,点击添加条件
。 - 在
条件
输入框中输入需要通过 Charles 代理的 URL 模式(例如*localhost:3000/*
)。 - 在
情景模式
下拉菜单中选择刚才创建的情景模式(例如Charles Proxy
)。 - 点击
保存
按钮保存规则。
- 返回 SwitchyOmega 主页面,选择
3. 配置 Charles SSL 代理
如果要捕获 HTTPS 请求,请确保在 Charles 中启用了 SSL 代理,并安装 Charles 根证书:
- 在 Charles 中,选择
Proxy
->SSL Proxying Settings...
。 - 在
SSL Proxying
标签中,勾选Enable SSL Proxying
。 - 点击
Add
按钮,在Host
中输入*
,在Port
中输入*
,表示捕获所有主机和端口的 HTTPS 请求。
安装 Charles 根证书
- 在 Charles 中,选择
Help
->SSL Proxying
->Install Charles Root Certificate
。 - 按照提示在系统和浏览器中安装 Charles 根证书。
4. 验证设置
- 打开浏览器并访问
http://127.0.0.1:3000/
或其他你希望捕获的请求地址。 - 在 Charles 的
Structure
面板中查看请求日志。
5. 测试示例页面
创建一个简单的 HTML 文件发送请求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET Request Test</title>
</head>
<body>
<h1>Test GET Request</h1>
<button id="sendRequest">Send GET Request</button>
<script>
document.getElementById('sendRequest').addEventListener('click', function () {
const url = 'http://localhost.charlesproxy.com:3006';
fetch(url, {
method: 'GET',
headers: {
'Accept': 'application/json, text/plain, */*'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
});
</script>
</body>
</html>
6. 确认请求和响应
- 在浏览器中打开
index.html
。 - 点击 "Send POST Request" 按钮。
- 在 Charles 的
Structure
面板中查看请求日志,确保请求通过代理发送并被记录。
over
注意事项
Charles 默认不捕获 localhost
或 127.0.0.1
的请求,可以通过以下策略规避
1. 使用 Charles 的「映射本地主机」功能
Charles 提供了一个内置功能,可以捕获本地主机的请求。你可以使用 Charles 的「映射本地主机」(Map Localhost)功能,将 localhost
和 127.0.0.1
的请求重定向到一个可捕获的地址。
配置步骤:
- 打开 Charles,选择
Proxy
->Proxy Settings...
。 - 在
Proxy Settings
窗口中,选择Local Map
标签。 - 勾选
Enable Map Localhost
选项。 - 添加映射规则,将
localhost
或127.0.0.1
重定向到一个其他域名或 IP 地址。
2. 使用 Charles 的「重写工具」功能
你可以使用 Charles 的重写工具(Rewrite Tool)来捕获并重定向 localhost
或 127.0.0.1
的请求。
配置步骤:
- 打开 Charles,选择
Tools
->Rewrite...
。 - 点击左下角的
Add
按钮,创建一个新的重写规则。 - 在
Name
字段中为该规则命名(例如Localhost to Custom
)。 - 点击右下角的
Add
按钮,添加一个新的重写规则。 - 在
Type
下拉菜单中选择Host
。 - 在
Match
字段中输入localhost
或127.0.0.1
。 - 在
Replace
字段中输入一个自定义的域名(例如mytest.local
)。 - 确保勾选
Enabled
复选框,然后点击OK
保存设置。 - 在
Rewrite Settings
窗口中,确保刚刚创建的规则被勾选并启用,然后点击OK
。
3. 使用 Charles 的「DNS Spoofing」功能
你也可以使用 Charles 的 DNS 欺骗功能,将 localhost
或 127.0.0.1
的请求重定向到另一个地址。
配置步骤:
- 打开 Charles,选择
Tools
->DNS Spoofing...
。 - 在
DNS Spoofing
窗口中,点击Add
按钮。 - 在
Host
字段中输入localhost
或127.0.0.1
。 - 在
IP Address
字段中输入一个其他可捕获的 IP 地址(例如mytest.local
的 IP 地址)。 - 确保勾选
Enabled
复选框,然后点击OK
保存设置。】
4.使用localhost.charlesproxy.com代替localhost
Charles 提供了一个内置的域名 localhost.charlesproxy.com
,它可以用来捕获 localhost
或 127.0.0.1
的请求。使用这个域名是最简单的方法之一,因为它不需要任何额外的配置。
通过这些方法,你可以在不修改 hosts
文件的情况下捕获 localhost
或 127.0.0.1
的请求。每种方法都有其优点,具体选择可以根据你的实际需求和偏好来决定。