charles前端应用

4,023 阅读5分钟

我们在开发移动端页面的时候,抓包是必不可少的调试手段。抓包工具推荐使用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打开窗口,界面如下:

rewrite

图中分3块区域:

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

上图中可以看出,我配置了一套规则,针对主站内所有url进行修改,修改规则为两条,下面我们来看一下这两条规则如何配置。

第一条规则配置如下:

rule

可以看到配置很简单,Type选的是Add Header,即添加一个请求头。然后把登录的cookie填到下面,然后就可以愉快的以登录状态在本地访问测试或者线上环境了。但是有一个不好的地方,cookie一般都有时效,所以时效的时候,你要重新更改配置中的cookie。

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

rule1

Rewrite还有很多其他的用法,比如添加请求数据、修改请求数据、修改请求状态码等等。

Map Remote

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

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

一般情况下采用第二种,比较灵活,这时候我需要配置一下映射了:

remote

我这里配置的是,所有本地/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。这样我们就可以直接看到我们的修改在线上的效果了。这对于本地环境不齐全,必须依赖线上环境查看效果的情况很适用。

配置方法很简单,如下:

local