charels配置与map local 、map remote 、rewrite的使用

一.charles配置与抓包

破译版下载地址

页面左侧下滑可以找到文件树哦~

1.1 charles视图

Structure/结构视图，将网络请求按访问的域名分类，比如某个域名下有n个资源请求，那么所有此域名下的请求都会在这里做一个详细的分类；
Sequence/序列视图，将网络请求按访问的时间排序，按照你的电脑的发送请求顺序进行。

1.2 charles开启抓包

1.2.1 抓取浏览器网页请求

1.2.2 抓取手机端请求

在 Charles 菜单栏上选择 Proxy -> Proxy Settings，填写代理端口 8888，并且勾选启动代理。

在手机中找到与电脑一致的wifi，点击【配置代理】,填入电脑ip与代理端口号

1.3 下载并信任证书：

1.3.1 mac端信任证书

1.3.2 手机端信任证书

用 iPhone Safari 访问这个地址「注意要用 Safari 浏览器」，然后安装证书

证书安装完后在手机「通用 -> 关于本机->证书信任设置」中开启信任此证书

1.4 可能会遇到的问题

1.4.1电脑无法上网

charles一旦开启代理，mac的代理就会被强制修改成charles的，如果网页无法访问，建议取消勾选以下选项。

系统偏好设置-高级-代理：网页代理、网页安全代理

1.4.2charles抓包乱码

直接添加https捕捉443端口到ssl proxing settings中

443端口即网页浏览端口，主要是用于HTTPS服务，是提供加密和通过安全端口传输的另一种HTTP。 在一些对安全性要求较高的网站，比如银行、证券、购物等，都采用HTTPS服务，这样在这些网站上的交换信息，其他人抓包获取到的是加密数据，保证了交易的安全性。

1.4.3 手机无法上网

连接手机后电脑可以抓到包但是手机无法上网的问题，可能大家都遇到过。这里首先要看一下电脑和手机的证书是否都有正确安装。然后就是一定要看一下**是否信任了全部证书！**记得是全部！！！我就是只管了我当时下载的，有一个之前安装的没信任我没注意到，所以耽误半天时间！！

二.map 与rewrite的使用

2.1 map

map功能：将某个请求进行重定向，用重定向后的内容来响应请求的内容；

2.1.1 map local

将某个网络请求重定向到本地文件

可以重定向css、js、html文件，因为线上的数据可能是打包过后的无法进行调试，这时可以使用本地文件来进行调试

现在我们举例

2.1.1.1 使用接口json文件调试线上环境**

（1）.找到我的的接口->右击选择【save the response】，把这个文件保存下来

(2).然后打开文件，对想要修改的数据进行编辑保存

(3).接口右击->【map local】

（4）.在窗口中选择我们要代理的文件

现在来看下效果

map local前：

map local后：

2.1.1.2 使用本地bundle.js 与index.js调试

这是我在本地文件更改的内容


然后我们找到页面中使用的js文件

再定位到接口中的这两个文件，右击选择【map local】，可以只对当前两个文件进行map local

一般这样就配置好了，现在我们来访问下页面

值得注意的是，有上边html文件中我们发现：
script标签加载的外部文件，这就涉及到了跨域的问题，
访问页面直接给出错误。
crossorigin="anonymous"这个属性就是要js报出跨域问题的具体错误。

2.1.2 map remote

将某个网络请求重定向到另一个网络请求

本地没有数据，可以使用其他环境的数据进行开发而不用mock数据

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

除了单个map隐射外，还可以使用*通配符进行批量匹配，不用一个个建立重定向了

上面map from配置中path项中使用了/*通配符，表示匹配localhost:8058下下所有的文件路径及子路径，将其重定向到tribecollege.58.com

然后我们的浏览器直接访问tribecollege.58.com就是我们本地的内容啦

补充一下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/及其子目录下

2.2 rewirte

rewrite功能重写对应的内容，主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite,所以可以实现跨域请求。

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

2.2.1 Rewrite的具体设置规则

到这里单个文件map local对应的情况就可以正常访问页面了

2.2.2 urls去版本号实现包代理

现在有一个情况是，如果我们要监控多个页面如何进行map local,如果还像上边的步骤一样，那么我们需要一直一个文件一个文件的进行配置。为了节省时间与成本，我们也可以使用rewrite功能。

在上边我们可以看到，页面引入的bundle文件等都是带版本号的

接下来我们可以使用正则表达式，将文件名及版本号都去掉。

然后再通过Map Local将包代码代理到本地包的路径上

这样就可以实现整个工程/文件包下的路径map local啦！

好了，charles代理的相关配置及使用都总结在这里了。一开始接触的时候真的是一脸懵，好在有我热心可爱的同事一直在帮助我。现在总算有点眉目了，如果大家有疑问或者建议欢迎指出，我们一起探讨！