charles重定向请求map
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:
这时,将上面页面的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
,请求路径保持不变;
- 非数据请求api接口不进行重定向
具体的charles配置如下图所示:
注意上面
map From
中的Path
配置项使用了*
通配符,表示匹配127.0.0.1:8080/api/下的所有文件及子路径,将其重定向到cmstest.intra.xiaojukeji.com下的/api/路径下
上面的配置通过map Remote
就是实现了区别对待本地系统的不同请求,将指定路径下的请求重定向到指定的环境,配置完成后看到所捕获的请求信息如下图所示。
这说明配置已经生效,那么本地开发,测试环境数据就可以看到了,剩下的就可以愉快的开发项目了,是不是超赞啊!
补充一下map隐射的相关功能
-
map隐射可以使用的模式匹配符有三种:
-
*
: 可以匹配0个或者多个字符 -
?
: 可以匹配一个字符 -
[...]
: 范围选择符,可以匹配范围中的任意一个字符
-
-
假设
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/及其子目录下 |