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,然后就可以选择需要模拟的网络环境了:
![](http://img1.tuicool.com/rQ3mUvb.png!web)
3、修改 Request 网络请求
在调试时我们经常需要改变请求参数,这个功能就很方便,设置方法:
在请求列表中选择需要修改的请求,在反键菜单中选择 Compose,接下来就可以在下面修改 key,value 了,最后点击 Execute 发送请求。
![](http://img0.tuicool.com/nyYneiV.png!web)
除此之外设置断点也可以修改 Request,这个在下面的第四点中一起介绍。
4、修改 Response 网络请求
与上条类似,调试时我们也需要对服务端的各种返回做处理,所以可以直接用 Charles 修改 Response 返回,设置有两个方法实现,一个是临时设置断点:
在请求列表中选择需要修改的请求,反键选择 Breakpoints,然后再次访问这个接口,这时 Charles 会捕获到该接口并让你修改 Request,修改完成后点击 Execute 会再次让你修改 Response,这时就可以修改,key,value 了,同样点击 Execute 发送请求。
![](http://img2.tuicool.com/2YbAjy6.png!web)
例子中简单的发送了一个 Ajax 请求,默认返回值为 ret:0,通过添加 Rewrite 规则后,我们可以看到浏览器中返回值为 ret:1 了:
另一个方法是设置 Rewrite,如果我们要经常性的修改 Response,那断点模式就比较繁琐,设置 Rewrite 即可一劳永逸:
在请求列表中选择需要修改的请求,在菜单栏上选择 Tools 》Rewrite,依次添加规则,修改的地址,修改值:
![](http://img0.tuicool.com/nyumYrf.png!web)
5、网络映射功能
映射分为 Map Local 和 Map Remote,第一个是将网络请求映射到本地,而第二个是映射到另一个服务地址,先以 Map Local 为例:
我们在 Charles 中找到一个样式表文件,反键菜单中选择 Map Local,然后在 Map To 地址中填入本地的一个样式表:
![](http://img2.tuicool.com/Zna2U3B.png!web)
刷新网页即可看到原本灰色的背景被改成了橙色,这个方法非常适用调试线上的 Javascript、CSS 文件。
然后在来看看 Map Remote 设置,反键菜单中选择 Map Remote,这里我们把 www.qq.com 映射到本地的一个 Node 服务:
![](http://img0.tuicool.com/buI3Ern.png!web)
打开 www.qq.com 看到就是 127.0.0.1:3004 服务,这个方法可以用于调试线上的 Ajax 请求接口。