How to enable Map Local over https with Charles Proxy?

步骤一：安装和配置Charles Proxy

首先，我们需要确保Charles Proxy已经成功安装在我们的机器上。安装完成后，需要进行一些基础配置，以确保它能够捕捉到HTTPS的流量。这包括：

1. 开启HTTP代理：在Charles的主界面中，选择 Proxy > Proxy Settings，确保在HTTP代理选项卡中启用了代理，并设置了合适的端口，通常默认是8888。
2. 安装SSL证书：为了使Charles能够解密HTTPS流量，我们需要在我们使用的设备上安装Charles的SSL证书。可以在 Help > SSL Proxying > Install Charles Root Certificate中找到安装选项，然后根据操作系统的不同，分别在系统或浏览器中安装和信任该证书。

步骤二：启用SSL Proxying

为了让Charles可以解析HTTPS中的数据，我们需要启用SSL Proxying功能：

1. 在Charles中，选中 Proxy > SSL Proxying Settings。
2. 在弹出的窗口中，点击 Add来添加需要解密的域名或IP地址。例如，可以添加 *代表所有网站，或者特定的域名比如 *.example.com。

步骤三：配置Map Local

一旦SSL Proxying设置完成，我们就可以设置Map Local规则了，这可以让我们将特定的网络请求映射到本地的文件：

1. 在Charles的主界面，找到一条你想要映射的请求，右键点击，选择 Map Local。
2. 在弹出的窗口中，设置本地路径。你可以选择一个已经存在的文件或者一个文件夹。如果是文件夹，Charles将会尝试匹配请求的文件名。

示例

假设我们正在开发一个网站，网址为 example.com，并且我们想替换网站上的一个JavaScript文件来进行本地调试。我们可以这样做：

• 捕捉到对应的JavaScript文件请求，例如 https://example.com/script.js。
• 右键点击该请求，选择 Map Local。
• 在Map Local设置中选择或输入本地文件路径，例如 /Users/username/Desktop/local_script.js。

结论

通过以上步骤，我们可以轻松地使用Charles Proxy通过HTTPS来实现Map Local的功能。这在前端开发和调试中非常有用，尤其当我们需要快速测试本地代码变更对线上环境的影响时。