charles前端配置以及拿charles干点前端开发调试的事儿。

如何配置

1. 确保手机(app所在位置)、电脑在同一局域网下.
2. 查看电脑本机IP（help/local Ip Addresses）
3. 打开charles下proxy/proxy Settings 确保端口8888 勾选Support HTTP/2 跟 Enable transparent HTTP Proxying
4. 开启手机wifi手动代理，主机名为电脑IP，端口8888
5. 此时charles会弹出弹窗，选择allow。
6. 如果想抓https。需要安装证书 help/ssl-proxying/最长的带mobile的那个
7. 手机默认浏览器打开 chls.pro/ssl 下载
8. 打开手机设置 找到证书，找到刚才下载的文件，点击安装，有的手机要选择VPN和应用。如果是ios记得在设置当中找到证书，打开一下（有的手机即使安装上了也不一定打开）。ios记得下载后在设置，关于手机中 里面有授权一下。
9. proxy/SSL Proxying Settings 选中Enable SSL Proxying 点击add ，输入想抓的host跟port 如果是要抓全部的https，host写 * port 443. 点击ok。
10. 此时应该就可以抓了。
11. 部分手机比如华为可能出现部分https的包是unknown的情况。

调试

Map Remote

让手机跑本地代码。

有这样一个场景：我们想本地调试 ipad上的app(我们开发的)上的其他环境的页面（测试 预发 又 或者线上环境），怎么用charles实现？

1. 按照上面的步骤，将app的网络代理到charles上，
2. Tools/Map Remote Settins/add
3. From填写的是app的源，Protocol：https Host：ffhz.test.xdf.cn Port:443 path:/* （这是匹配对应路径下全部的path）
4. 此时的完整版应该是 ffhz.test.xdf.cn:443/*
5. 下方Map To就是自己的本地服务了（前提是得开启npm run start）
6. protocol: http Host: 本机ip port 3001(根据webpack配置)
7. 此时的完整版应该是 http://10.201.57.15:3001。（运行npm run start 看看终端的结果即可。）
8. 意思就是说匹配到ffhz的路径，就会代理到本地了。

==但是请记住，这个里的匹配路径不单单是 host 而且还可以是 请求api的路径==

但是为什么 例子中的ffhz.test.xdf.cn/* 匹配的是路径而不是api呢，推测是因为： 先匹配到路径，因为HTML是第一个文件，直接就将运行的html都替换为本地的了，那接下来的接口当然用的是本地打包的js里面写的了

同样的 既然能劫持别的环境跑本地，那么也能劫持本地跑别的环境。

这里是将本地本地后台的请求改为对外网的请求

#BreakPoints

通过给接口打断点，修改接口返回值。从而达到调试页面的作用。

1. 抓到接口
2. 双击，找到breakPoints
3. 下一次请求到该接口，打断点，同时新开breakPoints标签页。点击下方Execute，会看到子标签页Edit Response 找到JSON Text 此时就可以编辑接口返回值了。再点击Execute执行即可。