Charles 的几个调试技巧

Charles 是一个网络调试的代理工具，类似 Windows 下的 Fildder，这里介绍下几个常用的调试技巧，使用的版本是 Charles 4。

1、移动端抓包

在移动开发中，经常会遇到在手机上调试的场景，这时候就可以通过 Charles 进行抓包，设置也很简单：

在菜单栏上选择 Proxy 》Proxy Settings，勾选 Enable transparent HTTP proxying，代理端口填写 8888，也可以自定，这样设置就完成了；

接下来是手机端的设置，以 iPhone 为例：

在 iPhone 的设置》无线局域网，选择当前 WIFI 链接的详情，将底部有HTTP代理切换成手动，然后填上 Charles 所运行电脑的 IP，及端口号：

这时用手机访问网络，Charles 会弹出确认对话框，确认即可。

2、模拟移动网络环境

在菜单栏上选择，选择 Proxy 》Throttle Setting，勾选上 Enable Throttling，然后就可以选择需要模拟的网络环境了：

3、修改 Request 网络请求

在调试时我们经常需要改变请求参数，这个功能就很方便，设置方法：

在请求列表中选择需要修改的请求，在反键菜单中选择 Compose，接下来就可以在下面修改 key，value 了，最后点击 Execute 发送请求。

除此之外设置断点也可以修改 Request，这个在下面的第四点中一起介绍。

4、修改 Response 网络请求

与上条类似，调试时我们也需要对服务端的各种返回做处理，所以可以直接用 Charles 修改 Response 返回，设置有两个方法实现，一个是临时设置断点：

在请求列表中选择需要修改的请求，反键选择 Breakpoints，然后再次访问这个接口，这时 Charles 会捕获到该接口并让你修改 Request，修改完成后点击 Execute 会再次让你修改 Response，这时就可以修改，key，value 了，同样点击 Execute 发送请求。

例子中简单的发送了一个 Ajax 请求，默认返回值为 ret:0，通过添加 Rewrite 规则后，我们可以看到浏览器中返回值为 ret:1 了：

另一个方法是设置 Rewrite，如果我们要经常性的修改 Response，那断点模式就比较繁琐，设置 Rewrite 即可一劳永逸：

在请求列表中选择需要修改的请求，在菜单栏上选择 Tools 》Rewrite，依次添加规则，修改的地址，修改值：

5、网络映射功能

映射分为 Map Local 和 Map Remote，第一个是将网络请求映射到本地，而第二个是映射到另一个服务地址，先以 Map Local 为例：

我们在 Charles 中找到一个样式表文件，反键菜单中选择 Map Local，然后在 Map To 地址中填入本地的一个样式表：

刷新网页即可看到原本灰色的背景被改成了橙色，这个方法非常适用调试线上的 Javascript、CSS 文件。

然后在来看看 Map Remote 设置，反键菜单中选择 Map Remote，这里我们把 www.qq.com 映射到本地的一个 Node 服务：

打开 www.qq.com 看到就是 127.0.0.1:3004 服务，这个方法可以用于调试线上的 Ajax 请求接口。