Charles 的几个调试技巧

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

一、移动端抓包

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

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

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

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

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

二、模拟移动网络环境

在菜单栏上选择，选择 Proxy 》Throttle Setting，勾选上 Enable Throttling，而后就能够选择须要模拟的网络环境了：

三、修改 Request 网络请求

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

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

除此以外设置断点也能够修改 Request，这个在下面的第四点中一块儿介绍。

四、修改 Response 网络请求

与上条相似，调试时咱们也须要对服务端的各类返回作处理，因此能够直接用 Charles 修改 Response 返回，设置有两个方法实现，一个是临时设置断点：

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

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

另外一个方法是设置 Rewrite，若是咱们要常常性的修改 Response，那断点模式就比较繁琐，设置 Rewrite 便可一劳永逸：

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

五、网络映射功能

映射分为 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 请求接口。