charles本地调试之map和rewrite功能

charles是一款mac下代理调试工具，对于前端开发同窗来讲是至关方便的一个调试接口的工具；不过charles须要收费，不过在天朝几乎收费的软件都能找到破解方法；

使用charles前，须要将charles设置成mac OS的网络系代理服务器，这样charles就能够捕获到mac上全部的网络请求，而后charles在作些手脚（如map和rewrite功能）就能够很轻松的实现接口的调试。

至于charles的具体使用能够在网上查阅其具体使用，本文就来讲说在使用charles调试过程当中至关重要的map和rewrite功能，这也前端调试接口用到charles最多的功能。

map功能

---

map功能，顾名思义就是将某个请求进行重定向，用重定向后的内容来响应请求的内容；

map功能分为map Local和map Remote,两者区分是：

• map Local：是将某个网络请求重定向到本地的某个文件

• map Remote：是将某个网络请求重定向到另外一个网络请求

  两者除了重定向文件的位置不一样以外，其余功能都是同样的。他们均可以对js、css、html以及api接口都可重定向，此外也可使用通配符来进行简单的批量匹配，达到批量重定向的目的。

在使用map功能时，本人最多见的使用场景简要说明以下：

• js、css重定向：主要是来调试js和css的实现效果

  • 本地开发获取不到接口数据，那么就使用测试环境，经过map Local来将制定的js、css重定向本地进行开发
  • 线上有个bug，想定位问题，可是线上代码都压缩过无法debug，这时可经过重定向到本地实现调试

• html重定向：在开发过程当中因为本地没有数据，那么可使用测试环境的数据进行开发而不用mock数据，这时能够访问测试环境的某个页面，而后将其页面的html重定向到本地的某个页面来获取测试数据。
  页面结构可能以下面这样，有3个js引用，前面2个js为每一个页面公共的js，最后一个js为当前页的业务逻辑js：

<scritp type="text/javascript" src="http://host/path/com1.js"></scritp>
    <scritp type="text/javascript" src="http://host/path/com2.js"></scritp>
    <scritp type="text/javascript" src="http://host/path/page.js"></scritp>

这时，将上面页面的html重定向到本地的开发页面html，因为本地页面的3个js有2个是公共的，因此他会加载测试环境的对应js，这时须要将业务逻辑的js也需重定向到本地js，这样就能够开发了；

他只用了2个重定向操做实现：能够实现本地开发，避免mock数据；不然须要多个重定向并且还须要本身mock数据。

• api重定向： 为了mock数据；通常使用map Remote功能来将本地的请求重定向到测试或者线上环境的网络请求。

除了单个map隐射外，还能够使用*通配符进行批量匹配，不用一个个创建重定向了。下面举一个实战的例子。

在项目开发过程当中可能会遇到这种状况，本地开发老是要为各类数据而烦恼，那么可否在本地开发中批量用到某个环境的数据呢？答案固然能够！

在本人的某个项目开发中，本地开发由于没有数据，须要相应环境的数据，因此就须要将本地请求数据的api接口map Remote到车上环境来获取测试数据而不用进行大量的mock数据，由于涉及系统涉及到的数据api接口比较多，每一个都进行单独重定向的话，效率过低；
而非数据api接口的请求不须要重定向，那么涉及到的问题是：

• 修改数据请求接口api的host为测试环境。

  本地系统中的/api/路径下的请求都转到对应的测试环境(cmstest.intra.xiaojukeji.com)的对应目录/api/下,即数据接口请求的host改成测试环境hostcmstest.intra.xiaojukeji.com,请求路径保持不变；

`http://127.0.0.1:8080/api/transit-nepenthes/line/list` ---> `http://cmstest.intra.xiaojukeji.com/api/transit-nepenthes/line/list`

• 非数据请求api接口不进行重定向

具体的charles配置以下图所示：

注意上面map From中的Path配置项使用了*通配符，表示匹配127.0.0.1:8080/api/下的全部文件及子路径，将其重定向到cmstest.intra.xiaojukeji.com下的/api/路径下

上面的配置经过map Remote就是实现了区别对待本地系统的不一样请求，将指定路径下的请求重定向到指定的环境，配置完成后看到所捕获的请求信息以下图所示。

这说明配置已经生效，那么本地开发，测试环境数据就能够看到了，剩下的就能够愉快的开发项目了，是否是超赞啊！

---

补充一下map隐射的相关功能

• map隐射可使用的模式匹配符有三种：

  1. *: 能够匹配0个或者多个字符

  2. ?: 能够匹配一个字符

  3. [...]: 范围选择符，能够匹配范围中的任意一个字符

• 假设Map From配置中的各个项为空，表示匹配全部请求，而后Map To项的配置不一样，表明不一样含义，下表列出一个简单例子

Host配置值	Path配置值	配置产生的结果
charlesproxy.com		匹配全部的请求重定向到charlesproxy.com主机
*.charlesproxy.com		匹配全部的请求重定向到以.charlesproxy.com结尾的主机
charlesproxy.com	/charles/	匹配全部请求只重定向到charlesproxy.com/charles/路径下
charlesproxy.com	/charles/*	匹配全部请求只重定向到charlesproxy.com/charles/路径下,包括路径下的文件及其路径的子路径
charlesproxy.com	/charles	匹配全部请求只重定向到charlesproxy.com/charles下
charlesproxy.com	/index.html	匹配全部请求重定向到charlesproxy.com/index.html
	/charles/*.html	匹配全部请求重定向到任意主机下的以.html结尾的文件，该文件存放在主机的/charles/及其子目录下

Rewrite功能

---

rewrite功能重写对应的内容，主要能够对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

rewrite功能支持正则表达式的写法，这是一个很是有用的功能；例如Math项的value正则式中的组捕获项在Replace的value值中可使用$1~$n之类的捕获组

Rewrite的具体设置规则步骤，能够用下面一幅图来讲明：

上面map Rewrite中用127.0.0.1:8080/api/*下的全部接口替换成指定host下对应的/api/*路径，而其余接口不作处理，用rewrite一样能够实现

下面就rewrite设置规则内容页面，就各项rewrite规则作一个简单说明，指出其对应的做用及其使用场景：

• header：
  • 做用：能够对请求或者响应的header内容进行操做，包括添加、修改及删除。
  • 使用场景：在须要对header进行处理时用到，例如为了用上某个环境数据，可能须要对应cookie，这时本地开发是能够在请求的header中加上cookie信息；也能够重写响应header的信息

以下图，在本地开发时，须要的某个环境中的数据api接口须要当前登陆用户的登陆信息的cookie，本地环境没有这些cookie，这时就须要添加须要cookie头，以下图所示，为匹配的接口添加cookie相关的header：

• host: 主要是对请求进行host修改，以达到本地请求获取指定host环境中的数据，常见于mock数据

• url:
  • 做用：修改url中某些部分，能够用别的url进行替换或者url裁剪时间戳或者md5等
  • 使用场景：场景使用很是多，既能够对host也能够对path进行rewrite，能够知足指定host下的请求重定向到其余host下对应path下

• path: 主要rewrite path内容使用指定rewrite规则的path来响应指定的请求path，它能够对paht进行裁剪

• query param:
  • 做用：能够对param进行操做，包括修改、添加、删除等
  • 使用场景：有时请求可能多传递了没必要要的参数，这时能够rewirte功能去掉多余的参数；另外也能够添加请求必须而暂时没法提供的参数

• response status: 顾名思义就是对response的状态码进行rewrite；比方我想对一个指定页面A的访问重定向到另外一个页面B，就能够用到这个。以下图：
  

• body：
  • 做用：对请求的响应内容作修改，通常是对某一个或几个值进行rewrite，用新的值来替代返回的值
  • 使用场景：能够用来mock数据，比方说在开发中为了测试功能须要请求的某个数组字段有值，可是当前环境没法给出，那么就可使用该功能

---

参考文献

• Charles辅助调试接口