使用Charles代理监控网络流量
Charles代理可以帮助调试Vega应用的网络流量，并检查处理敏感信息的HTTPS连接。它充当您的应用和服务器之间的中间人，拦截网络流量，并允许您：
- 监控所有网络流量
- 识别网络问题
- 修改请求和响应
- 分析性能
先决条件
安装以下要求项：
支持的协议
配置您的应用以使用以下一种或多种协议才能让Charles代理捕获应用的流量：
- HTTP
- HTTPS
- XMLHttpRequest
- 媒体播放器请求
- Websocket请求
设置Charles代理
如果您之前配置了Charles代理，但想添加或修改proxy-config.json文件，请转到添加或修改proxy-config.json文件。如果这是您第一次设置Charles代理，请完成以下步骤：
- 打开Charles代理，在出现提示时，授予macOS代理权限。
-
将HTTP代理端口设置为8888。
代理设置 a. 转到Proxy（代理）> Proxy Settings（代理设置）。
b. 在HTTP Proxy Port（HTTP代理端口）字段中输入8888。
c. 单击OK。
-
配置安全套接字层 (SSL) 代理。
SSL代理设置 a. 转到Proxy > SSL Proxying Settings（SSL代理设置）。
b. 单击SSL Proxying（SSL代理）选项卡。
c. 在Include（包含）部分中单击Add（添加）。
d. 在Edit Location（编辑位置）框中，将Host（主机）框留空。
e. 在Port（端口）字段中输入443。
f. 单击OK。
-
生成根证书。
a. 转到Help（帮助）> SSL Proxying > Save Charles Root Certificate（保存Charles根证书）。
b. 在Save As（另存为）字段中，输入proxy-cert.pem。
c. 将证书保存在您的首选位置。
d. 单击保存。
将Charles代理添加到Vega应用
-
在命令提示符处，导航到您的应用：
例如：
cd keplersampleapp提示： 将keplersampleapp替换为您的应用名称。 -
清理项目：
kepler clean - 在您的项目目录中创建一个assets/raw文件夹。
- 将proxy-cert.pem文件移到assets/raw文件夹。
-
在assets/raw文件夹中创建proxy-config.json文件。
代理配置文件示例：
{ "enableSSLProxying": true, "caBundleFile": "raw/proxy-cert.pem", "host": "localhost", "port": 8888 }
下表列出了proxy-config.json文件的必填字段。
| 字段 | 类型 | 描述 | 必需（是/否） |
|---|---|---|---|
caBundleFile |
字符串 | 根证书文件的路径（相对于assets目录）。 | 是 |
enableSSLProxying |
布尔值 | 决定是否信任caBundleFile证书。如果设置为false，则cabundleFile不起作用。出于安全考虑，WebView只信任应用调试变体的caBundleFile。在适用于Vega的React Native，这适用于报告NODE_ENV进程环境为development的应用，如使用WebView开发应用中所述。 |
是 |
host |
字符串 | 如果您提供有效的主机和端口，系统将启用HTTP、HTTPS和WebSocket（非WebView）流量代理。对于在Vega虚拟设备上运行的应用，请使用10.0.2.2作为host的值。 |
是 |
port |
数量 | 指定主机上用于代理的端口。 | 是 |
proxy-config.json文件的格式和证书路径是否正确。调试您的应用
-
安装依赖项：
npm install -
运行并构建您的应用：
npm run build:app -
在Vega虚拟设备或Fire TV Stick上安装应用。
监控流量
- 转到Proxy（代理）> Start Recording（开始录制）。
-
在Vega虚拟设备或Fire TV Stick上启动应用。
Charles代理显示您的应用发出的网络请求。您可以在Structure（结构）或Sequence（序列）选项卡中查看详细信息。
注意： Charles代理将SSL流量显示为已解密。重要须知： 如果没有流量出现，请验证您的代理配置。如果您看到SSL错误，请检查您的Charles根证书安装情况。 -
测试Charles连接：
curl -x localhost:8888 www.amazon.com
设置端口转发
端口转发会指示设备改为向您的计算机发送针对特定端口的请求。
仅对Fire TV Stick完成以下步骤（Vega虚拟设备不需要）：
- 在命令提示符下，运行：
kepler exec vda reverse tcp:<远程端口> tcp:<本地端口>提示： 将<远程端口>替换为您在Fire TV Stick的proxy-config.json文件中配置的端口。将<远程端口>替换为您在开发计算机上为Charles代理配置的端口（端口8888）。示例：
kepler exec vda reverse tcp:8888 tcp:8888重要须知： 完成调试后停止端口转发以恢复设备的正常网络配置。 -
在提交应用投入生产之前，请删除以下文件：
- proxy-config.json
- 证书文件（例如assets/raw/proxy-cert.pem）
-
清理并重建您的项目：
kepler cleannpm installnpm run build:app
添加或修改proxy-config.json文件
要更新您的配置，请执行以下操作：
- 完成设置Charles代理中的步骤。
- 卸载现有应用。
- 安装新应用。
在多台计算机上使用Charles代理
了解如何监控开发和测试计算机上的Vega应用网络流量。使用此方法共享配置了Charles代理的.vpkg以进行团队测试。
在开发计算机上
- 完成设置Charles代理中的步骤。
-
导出根证书和私钥：
Charles代理的证书管理界面 a. 转到Help > SSL Proxying > Export Charles Root Certificate and Private Key（导出Charles根证书和私钥）……
b. 在Export Charles Root Certificate and Private Key对话框中：
- 设置一个安全性高的密码（稍后以安全的方式与测试者分享该密码） - 命名文件（例如，proxy-root-cert-private-key.p12） - 选择下载位置 -
使用以下选项之一提取根证书：
选项1（首选）：
- 转到Help > SSL Proxying > Save Charles Root Certificate。
- 命名文件（例如，
proxy-cert.pem）
选项2（使用OpenSSL）：
openssl pkcs12 -in proxy-root-cert-private-key.p12 -out proxy-cert.pem -clcerts -nokeys - 完成将Charles代理添加到Vega应用中的步骤。
-
以安全的方式与测试者分享以下信息：
- proxy-root-cert-private-key.p12文件
- 密码
重要须知： 使用安全的方法共享证书文件和密码，因为借助它们可以访问加密流量。
在测试机上
测试者应完成此部分。
- 完成设置Charles代理中的步骤。
-
导入分享的证书。
根证书选项卡 a. 转到Proxy > SSL Proxying Settings > Root Certificate（根证书）> Import P12（导入P12）。
b. 选择分享proxy-root-cert-private-key.p12文件。
c. 输入开发团队提供的密码。
- 完成设置端口转发中的步骤。
-
完成监控流量中的步骤。
重要须知： 如果没有流量出现，请验证端口转发配置。如果出现SSL错误，请检查证书导入。
SSL配置的最佳实践
要确保Charles代理的可靠运行，请如下操作：
- 验证您的
proxy-config.json文件的格式和证书路径是否正确无误。 - 在启动应用之前启动Charles代理。
故障排除
如果您在将Charles代理结合Vega开发工具使用时遇到问题，请参阅Charles代理故障排除以了解常见问题和解决方案。
相关主题
- Charles代理文档（仅提供英文版）。
- 通过TCP/IP启用VDA
Last updated: 2025年10月8日
