阅读 4125

解锁Charles的姿势

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数据包

解锁该姿势分三步走:

  • 1.完成截获mac下https数据包的操作。
  • 2.为手机设置代理,代理的ip地址为mac地址。

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

  • 3.为手机设置好代理之后,这时候,mac下Charles会弹出是否允许访问的窗口,点击Allow:
  • 4.在手机上安装并启用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),快速定位问题。
当问题被解决之后,可以验证问题是否解决。

我们解锁下这两种姿势。

远程映射

    1. 菜单-> Tools -> Map Remote,打开设置面板。
    1. 设置映射前文件地址、映射后文件地址


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

本地映射

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

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

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

  1. 为请求打断点。
  2. 并发请求测试。
  3. 反向代理。
  4. 限网速。
  5. DNS欺骗。
  6. ...

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

关注下面的标签,发现更多相似文章
评论
说说你的看法