解锁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. ...

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