持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
前言
身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人
开开心心学技术大法~~
来了来了，他真的来了~
正文
功能介绍
-
代理资源到本地
- 代理请求数据
- 代理静态资源，比如html，js，css
使用场景
代理请求数据
- 通常用于在非开发环境模拟不同请求数据，比如某个字段的状态可能导致ui变化等
- 本地开发环境是有代理，所以基本用不到
- 非开发环境除了charles的map local功能外，还可以用nginx来代理实现
- 浏览器环境的话可以借助谷歌插件来实现在线数据代理，但是真机调试时这种方式就不够友好了，这个时候代理请求数据到本地的功能就很有用了
代理静态资源
- 比如我要将线上html入口改为本地html入口，数据走线上
- 或者要用某个本地js来调试一些功能
- 这种情况下可以通过nginx代理，也可以通过charles的map local来代理
实际使用
可以通过工具栏 => Tools => Map Local... 打开窗口，或者快捷键cmd + option + L打开。
打开后的弹窗是这样的：
需要打开Enable Map Local功能，然后添加点击Add去添加map local的规则。
我们可以看到有Map From和Map to两个模块，其中Map From就是要代理的请求，这个请求可以是html、js、css等资源，当然也有可能是请求的数据资源，也包含其他的option请求等。
Map to就是抓取到请求后，map映射的目标文件，可以看到，我这里是一个本地的tracking-pro.js的文件。
其中Map From中有
- Protocol：协议
- Host：域名host
- Port：端口
- Path：请求path
- Query：请求参数
一般我们直接复制完整请求粘贴到Host之后，charles会自动帮你分类。
Map to的下面有个Case-sensitive，意思是区分大小写。
配置完Map Local Settings之后一路点击OK即可。
结语
charles还有常用的map remote、rewrite等功能，兄弟们可以细细了解下，在日常的调试工作中能轻便不少
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
