我们在开发移动端页面的时候，抓包是必不可少的调试手段。抓包工具推荐使用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块区域：

规则，你可以自定义多套规则，一套规则包括对哪些url进行哪些修改。
url集，你可以配置对那些url进行修改
具体的修改规则

上图中可以看出，我配置了一套规则，针对主站内所有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。这样我们就可以直接看到我们的修改在线上的效果了。这对于本地环境不齐全，必须依赖线上环境查看效果的情况很适用。

配置方法很简单，如下：