Tancy's Blog

Charles 基础篇

Charles是目前最强大的http调试工具之一,在界面和功能上远强于Fiddler,同时是全平台支持,堪称神器,唯一的缺陷是这软件是收费的,而且是要$50美金…


Charles 启动画面

启动后,神器启动画面。

Charles 主界面

神器主界面。
Charles有个会话(session,不是指http中的session)的概念,可以理解为浏览器中的tab,这个功能在需要调试多个站点页面时很实用,当你刷新页面的时候,只会在当前session中捕获请求。
(PS:MacOS 下command+N创建个新的session,command+W关闭当前session)
Charles的代理服务器启动就可以使用(会提示给firefox安装插件),如果没有捕获到请求,请清理下浏览器缓存。

##界面功能初探


Charles 界面功能概览

工具条包含了Charles的大部分功能:

Charles 界面功能概览

有几个功能比较抽象,后面会详细说明。
右键请求出现菜单,Charles的右键菜单功能比fiddler强大太多了。


Charles 快捷菜单

双击请求进入列表视图,类似fiddler,方便查看和过滤请求。

Charles 搜索&详情

Charles的过滤查找功能非常赞,很快速:请求详情跟fiddler相似,但直观不少:工具视图基本讲解完毕,接下来我们用Charles做点事情。


##代理配置


Charles 代理设置

本地代理和远程代理

Charles的代理服务器端口跟fiddler一样都是8888,即你的本机ip:8888。


Charles 搜索&详情

我们可以目标将一个文件代理成本地的文件。点击“Map Local”后:


Charles Map Local

刷新页面试试。代理成功,so easy!

Charles的树状视图比fiddler的列表视图好的地方在于,多次刷新后的请求会被归纳到树里面,更加一目了然,用fiddler的时候,有点强迫症的同学,都要点击clear,有木有…
Charles是支持子目录代理哦,非常实用的功能:(使用通配符*)


Charles 目录代理

本地地址选择个子目录,不需要通配符。
如何判断是否代理成功呢?


Charles notes

这点Charles比fiddler人性化多了。
校验是否代理成功,最省力的方式是点击工具条上的刷新按钮,刷新单个请求,如果代理成功,Charles会往“Notes”界面打个log。


Charles notes

去除代理配置

小技巧:所有的配置开关都可以通过工具条上的“工具”设置(倒数第二个按钮)。

小技巧:建议开启No Caching,不缓存请求。


##mobile代理功能

手机或平板页面的调试,我们需要把请求代理到pc端的Charles上。
必须确保mobile端和pc端连的是相同的无线网络。
ios的配置非常简单

Charles ios网络

服务器ip设置成pc的ip,端口好设置成8888即可。
然后mobile终端可以刷新试试。

Charles支持https和sockets的代理,还支持SSL,非常全面。


晓田 ronntx@gmail.com