解锁Charles的姿势

2017-11-23 14:44:53来源:https://juejin.im/post/5a1033d2f265da431f4aa81f作者:稀土掘金人点击

分享

Charles,作为mac开发的好基友,不知道大家是否对它的使用姿势了如指掌。相信很多童鞋只是熟悉几种简单的功能,姿势少了很无趣(你懂得),今天为大家解锁几种高级姿势......希望能够帮到大家。


Charles是个啥

Charles是个啥,相信大家都会知道,如果真有不知道的,请百度之...


这里我想告诉大家的是Charles能帮助我们做什么?


试想这样几种场景:


A君在本地开发完页面之后,想联调接口,但是接口部署在测试服务器上,xxx.com ,这个时候联调会有跨域问题,怎么解决?

解决这个问题的方式有很多,通过设置代理即可,这里只讲如何利用Charles实现临时跨域。通过Charles的重写https请求头和响应头功能,为跨域的地址添加响应头(Access-Control-Allow-Origin)实现跨域。


线上应用移动端表现异常,怎么确认到底是接口返回数据的问题还是手机兼容性问题?

截取手机上的https数据包,先判断接口数据是否正常,若正常,排除接口问题,可以确认是手机兼容性问题。


线上应用在手机端表现异常,接口正常,单纯从代码层面分析不出问题的产生原因,那怎么快速定位、解决问题?

利用Charles的资源映射功能,将远程js资源映射到本地或者测试环境的js文件,通过打日志(直观的alert)来排查问题。


...


还有很多场景就不一一介绍了,只介绍上面三种频次高的场景。


Charles的用途总结起来就是:代理、抓包、改包!
谁会用到Charles

使用mac本的前端、测试、APP开发、后端开发....


待解锁姿势:

本文只解锁下面几种重要姿势,能够应对上述三种场景。


截取https的数据包
修改https的请求响应头
资源映射 截获mac下https的数据包 解锁该姿势分三步走:
1.安装根证书 Charles Root Certificate 。

菜单 -> help -> SSL Proxying -> Install Charles Root Certifiate。





2.找到安装好的Charles根证书,并信任它。

mac下,找到 应用程序 -> 实用程序 -> 钥匙串访问 ,打开钥匙串后,选择 Charles Proxy CA 证书,双击,设置证书为 始终信任 。








3.右键点击某个域名,开启https代理。





经过这三步猛如虎的操作,我们就可以抓到mac上的https请求数据包了,如下图。





至此,https的请求头、请求体、响应头、响应体就可以以明文的方式看到了。


截获手机上的https数据包

解锁该姿势分三步走:



完成截获mac下https数据包的操作。


为手机设置代理,代理的ip地址为mac地址。

菜单 -> Help -> Local IP Address ,即可查看mac IP 地址。








为手机设置好代理之后,这时候,mac下Charles会弹出是否允许访问的窗口,点击Allow:







在手机上安装并启用Charles根证书
菜单-> Help -> SSL Proxying -> install Charles Root Certificate on a Mobile Device or Remote Browser
在手机上打开浏览器输入chls.pro/ssl,下载charles根证书,并安装
这一步尤为重要。在IOS手机下,打开设置->通用->关于本机->证书信任设置,启用刚才下载的Charles证书。











5.最后一步,仍然要在Charles上选中某一域名下,右键点击,允许代理。



完成这几步,我们就可以在Charles上看到手机上的https数据包了。 修改https的请求响应头 前面讲了一个场景,如何在开发阶段实现跨域,也说到了利用charles修改https响应头即可实现,具体操作步骤如下:

这里举个例子,我想让我的ifanqi.me域名下的页面去访问百度下面的一个接口,步骤如下:


1.菜单-> Tools -> Rewrite,打开设置面板。
2.添加一条规则






3.添加响应头



经过这一顿猛如虎的操作,ifanqi.me下的页面就可以访问百度的接口啦。有兴趣的同学可以试下,通过修改请求头和响应头,我们可以随意调用别的网站的接口,与此同时加深自己对 http(s) 协议的理解。


资源映射

资源映射,简单来说就是,将某个线上资源的请求,映射到线上另一个资源或者映射到本地文件。比如,资源映射可以帮助我当请求xxx.com/index.js 的时候,实际上去请求mmm.com/index.js 、或者我本机硬盘下的某个js文件。这样有什么好处呢?就像上面说的,可以快速排查、解决线上问题。


在本地js加上日志(如console或者alert),快速定位问题。


当问题被解决之后,可以验证问题是否解决。


我们解锁下这两种姿势。


远程映射

菜单-> Tools -> Map Remote,打开设置面板。


设置映射前文件地址、映射后文件地址




这两步设置完之后,就可以实现远程资源映射了。


本地映射
1.菜单-> Tools -> Map Local,打开设置面板。
2.设置映射前文件地址、选择映射后的本地文件。
这两步设置完之后,就可以实现本地资源映射了。

资源映射比较简单,但是可以帮助我们排查、解决、验证线上问题。


至此,几种重要的Charles姿势就都解锁了。除此,Charles还有很多有意思的功能,大家有时间可以自己研究一下,都比较简单。在这里我简单列一下:


为请求打断点。
并发请求测试。
反向代理。
限网速。
DNS欺骗。
...

这些都比较简单,感兴趣的童鞋可以去研究下,开发新的玩法。


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台