Charles 的几个调试技巧

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

1、移动端抓包

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

在菜单栏上选择 Proxy 》Proxy Settings,勾选 Enable transparent HTTP proxying,代理端口填写 8888,也可以自定,这样设置就完成了;
charles1
接下来是手机端的设置,以 iPhone 为例:

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

charles2

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

2、模拟移动网络环境

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

3、修改 Request 网络请求

在调试时我们经常需要改变请求参数,这个功能就很方便,设置方法:
在请求列表中选择需要修改的请求,在反键菜单中选择 Compose,接下来就可以在下面修改 key,value 了,最后点击 Execute 发送请求。
charles4

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

4、修改 Response 网络请求

与上条类似,调试时我们也需要对服务端的各种返回做处理,所以可以直接用 Charles 修改 Response 返回,设置有两个方法实现,一个是临时设置断点:
在请求列表中选择需要修改的请求,反键选择 Breakpoints,然后再次访问这个接口,这时 Charles 会捕获到该接口并让你修改 Request,修改完成后点击 Execute 会再次让你修改 Response,这时就可以修改,key,value 了,同样点击 Execute 发送请求。
charles5

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

charles7

另一个方法是设置 Rewrite,如果我们要经常性的修改 Response,那断点模式就比较繁琐,设置 Rewrite 即可一劳永逸:
在请求列表中选择需要修改的请求,在菜单栏上选择 Tools 》Rewrite,依次添加规则,修改的地址,修改值:
charles6

5、网络映射功能

映射分为 Map Local 和 Map Remote,第一个是将网络请求映射到本地,而第二个是映射到另一个服务地址,先以 Map Local 为例:
我们在 Charles 中找到一个样式表文件,反键菜单中选择 Map Local,然后在 Map To 地址中填入本地的一个样式表:
charles8

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

charles9

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注