使用Charles代理监控网络流量

Charles代理可以帮助调试Vega应用的网络流量，并检查处理敏感信息的HTTPS连接。此代理充当您的应用和服务器之间的中间人，拦截网络流量，并允许您：

• 监控所有网络流量
• 识别网络问题
• 修改请求和响应
• 分析性能

​

先决条件

安装以下要求项：

1. Charles代理（版本4.6或更高版本） 如需实现传输层安全 (TLS) 1.3版本的兼容性，请下载Charles 5。
2. Vega SDK最新版本
3. 一个Vega应用项目

​

支持的协议

配置您的应用以使用以下一种或多种协议才能让Charles代理捕获应用的流量：

• HTTP
• HTTPS
• XMLHttpRequest
• 媒体播放器请求
• Websocket请求

​

设置Charles代理

如果您之前配置了Charles代理，但想添加或修改proxy-config.json文件，请转到添加或修改proxy-config.json文件。如果这是您第一次设置Charles代理，请完成以下步骤：

1. 打开Charles代理，在出现提示时，授予macOS代理权限。
2. 将HTTP代理端口设置为8888。 a.转到Proxy（代理）> Proxy Settings（代理设置）。 b. 在HTTP Proxy Port（HTTP代理端口）字段中输入8888。 c. 选择OK（确定）。
3. 配置安全套接字层 (SSL) 代理。 a. 转到Proxy > SSL Proxying Settings（SSL代理设置）。 b. 选择SSL Proxying（SSL代理）选项卡。 c. 在Include（包含）部分中选择Add（添加）。 d. 在Edit Location（编辑位置）框中，将Host（主机）框留空。 e. 在Port（端口）字段中输入443。 f. 选择OK（确定）。
4. 生成根证书。 a. 转到Help > SSL Proxying > Save Charles Root Certificate（保存Charles根证书）。 b. 在Save As（另存为）字段中，输入proxy-cert.pem。 c. 将证书保存在您的首选位置。 d. 选择Save（保存）。

​

将Charles代理添加到Vega应用

1. 在命令提示符处，导航到您的应用： 例如：
   cd sampleapp
   
2. 清理项目：
   vega clean
   
3. 在您的项目目录中创建一个assets/raw文件夹。
4. 将proxy-cert.pem文件移到assets/raw文件夹。
5. 在assets/raw文件夹中创建proxy-config.json文件。 代理配置文件示例：
   {
       "enableSSLProxying": true,
       "caBundleFile": "raw/proxy-cert.pem",
       "host": "localhost",
       "port": 8888
   }
   

下表列出了proxy-config.json文件的必填字段。

​

调试您的应用

1. 安装依赖项：
   npm install
   
2. 运行并构建您的应用：
   npm run build:app
   
3. 在Vega虚拟设备或Fire TV Stick上安装应用。

​

监控流量

1. 转到Proxy > Start Recording（开始录制）。
2. 在Vega虚拟设备或Fire TV Stick上启动应用。 Charles代理显示您的应用发出的网络请求。您可以在Structure（结构）或Sequence（序列）选项卡中查看详细信息。
3. 测试Charles连接：
   curl -x localhost:8888 www.amazon.com
   

​

设置端口转发

端口转发会指示设备改为向您的计算机发送针对特定端口的请求。 仅对Fire TV Stick完成以下步骤（Vega虚拟设备不需要）：

1. 在命令提示符下，运行：
   vega exec vda reverse tcp:<远程端口> tcp:<本地端口>
   
   示例：
   vega exec vda reverse tcp:8888 tcp:8888
   
2. 在提交应用投入生产之前，请删除以下文件：
   • proxy-config.json
   • 证书文件（例如assets/raw/proxy-cert.pem）
3. 清理并重建您的项目： a. 清理
   vega clean
   
   b. 安装
   npm install
   
   c. 构建
   npm run build:app
   

​

添加或修改proxy-config.json文件

要更新您的配置，请执行以下操作：

1. 完成初始代理设置 完成设置Charles代理中的步骤。
2. 移除现有应用 卸载现有应用。
3. 部署更新的应用 安装新应用。

​

在多台计算机上使用Charles代理

了解如何监控开发和测试计算机上的Vega应用网络流量。使用此方法共享配置了Charles代理的.vpkg以进行团队测试。

​

在开发计算机上

1. 完成设置Charles代理中的步骤。
2. 导出根证书和私钥： 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）
   • 选择下载位置
3. 使用以下选项之一提取根证书： 选项1（首选）： a. 转到Help > SSL Proxying > Save Charles Root Certificate（保存Charles根证书）。 b. 命名文件（例如，proxy-cert.pem）。 选项2（使用OpenSSL）：
   openssl pkcs12 -in proxy-root-cert-private-key.p12 -out proxy-cert.pem -clcerts -nokeys
   
4. 完成将Charles代理添加到Vega应用中的步骤。
5. 以安全的方式与测试者分享以下信息：
   • proxy-root-cert-private-key.p12文件
   • 密码

​

在测试机上

测试者应完成此部分。

1. 配置测试机代理 完成设置Charles代理中的步骤。
2. 导入分享的证书。 a. 转到Proxy > SSL Proxying Settings > Root Certificate > Import P12（导入P12）。 b. 选择分享proxy-root-cert-private-key.p12文件。 c. 输入开发团队提供的密码。
3. 配置测试机端口转发 完成设置端口转发中的步骤。
4. 监控测试机流量 完成监控流量中的步骤。

​

SSL配置的最佳实践

要确保Charles代理的可靠运行，请如下操作：

• 验证您的proxy-config.json文件的格式和证书路径是否正确无误。
• 在启动应用之前启动Charles代理。

​

故障排除

如果您在将Charles代理结合Vega开发工具使用时遇到问题，请参阅Charles代理故障排除以了解常见问题和解决方案。

​

相关主题

• Charles代理文档（仅提供英文版）。
• 通过TCP/IP启用VDA

---