解锁Charles的姿势

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

Charles是个啥，相信大家都会知道，如果真有不知道的，请百度之...
这里我想告诉大家的是Charles能帮助我们做什么？
试想这样几种场景：

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

解决这个问题的方式有很多，通过设置代理即可，这里只讲如何利用Charles实现临时跨域。通过Charles的重写https请求头和响应头功能，为跨域的地址添加响应头（Access-Control-Allow-Origin）实现跨域。
线上应用移动端表现异常，怎么确认到底是接口返回数据的问题还是手机兼容性问题？

截取手机上的https数据包，先判断接口数据是否正常，若正常，排除接口问题，可以确认是手机兼容性问题。
线上应用在手机端表现异常，接口正常，单纯从代码层面分析不出问题的产生原因，那怎么快速定位、解决问题？

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

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

Charles的用途总结起来就是：代理、抓包、改包！

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

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

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

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

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

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

经过这三步猛如虎的操作，我们就可以抓到mac上的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证书。

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

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

在本地js加上日志（如console或者alert），快速定位问题。
当问题被解决之后，可以验证问题是否解决。

我们解锁下这两种姿势。

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

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

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

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