charles前端应用

咱们在开发移动端页面的时候，抓包是必不可少的调试手段。抓包工具推荐使用charles，界面简洁、功能强大、配置灵活，走过路过不要错过。这篇文章总结一下charles的主要功能以及能帮助咱们解决的问题。

Rewrite

Charles上的解释为Modify Requests and Responses as they pass through Charles, 当请求通过charles时去修改请求或者响应。经过Rewrite，咱们能够很轻松地修改某个请求的请求和响应来达到咱们的目的。咱们开发中有一个问题是比较头疼的，就是登陆校验问题。有两种场景很不方便：第一是咱们在本地启动服务器，调试测试环境的数据，先假设你在本地用一些方法能够访问到测试环境的接口，但这时候接口有登陆校验，就没法访问到数据，流程走不下去；第二种是咱们作hybird app，在app内嵌套wap页面，使用app的登陆接口，只有在app内才有登陆状态，若是咱们想在电脑上进行调试，也会受到登陆校验的限制。解决这个问题的办法就是咱们要在本地模拟登陆状态，由于如今绝大多数的网站的登陆都是使用cookie来实现的，只要咱们把正确的登陆cookie嵌入到咱们的请求中，那咱们的请求就是有登陆状态的。咱们使用Rewrite就能够轻松解决这个问题。

咱们能够在Tools -> Rewirte打开窗口，界面以下：

图中分3块区域：

1. 规则，你能够自定义多套规则，一套规则包括对哪些url进行哪些修改。
2. url集，你能够配置对那些url进行修改
3. 具体的修改规则

上图中能够看出，我配置了一套规则，针对主站内全部url进行修改，修改规则为两条，下面咱们来看一下这两条规则如何配置。

第一条规则配置以下：

能够看到配置很简单，Type选的是Add Header,即添加一个请求头。而后把登陆的cookie填到下面，而后就能够愉快的以登陆状态在本地访问测试或者线上环境了。可是有一个很差的地方，cookie通常都有时效，因此时效的时候，你要从新更改配置中的cookie。

第二条规则是为了解决一个编码问题，我在调试过程当中遇到一些请求返回的json字符串在charles中显示为乱码，可是代码运行结果正常，抓包发现这些乱码的请求的响应头accept-encoding为gzip,deflate,br，有一个br编码方式，服务端会优先采用br来编码，而charles貌似不识别这种编码，因此我在这条规则中将br去掉，这样就能够正常显示返回的json字符串，规则以下：

Rewrite还有不少其余的用法，好比添加请求数据、修改请求数据、修改请求状态码等等。

Map Remote

Charles上的解释为Modify the request location to map one remote location to another。就是把一个请求映射到另外一个远程请求上。咱们能够经过这个功能，将本地的请求映射到测试/在线环境的请求中。通常咱们本地的服务都是以ip开头的，咱们写接口的时候，有两种写法：

• 带上请求域名，好比www.example.com/api/getData，能够直接在本地访问线上接口，可是有跨域问题
• 不带请求域名，好比/api/getData,以页面服务的域名为前缀，这时访问的接口就不是线上接口了

通常状况下采用第二种，比较灵活，这时候我须要配置一下映射了：

我这里配置的是，全部本地/api/下的请求都映射到www.example.com/域名下，开发者能够根据本身状况自行配置。这其中有一个问题是本地服务的接口和线上的接口须要分开，不能把本地服务也映射到线上域名上去，区分方法通常是在线上接口加一个前缀字段，好比我这里的/api/，这个能够和后台约定一下，若是后台不配合，你能够在本地开发环境本身加一个前缀。这样咱们就能够在本地去访问线上数据了，配合Rewrite，有登录校验的接口也是能够访问的。

Map Local

Charles上的解释为Use Local files serve remote locations。用本地文件去服务远程接口，咱们能够用咱们本地的文件当作远程接口的响应数据。这个功能通常有两个应用：

• 修改接口的返回值。有一些接口，只会在知足某些特殊条件下才会返回咱们想要的值，若是这些条件很难复现，好比首充活动这种，你能够用本地json文件当作接口的返回值，json文件的值你固然能够随意设置了。

• 用本地的js调试线上环境。好比说咱们网站中有一个main.js文件，咱们本地作了一些修改，想看一下这个修改若是放到线上是什么效果，咱们能够这样作，咱们直接访问线上网站，把线上网站的main.js,映射到咱们本地修改的main.js。好比www.example.com/js/main.js映射到/User/xxx/project/js/main.js。这样咱们就能够直接看到咱们的修改在线上的效果了。这对于本地环境不齐全，必须依赖线上环境查看效果的状况很适用。

配置方法很简单，以下：