下面介绍下mac笔记本上的抓包工具charles的安装与使用
一、charles的安装与基本使用
1、首先在mac笔记本上安装软件charles，官网地址：Download a Free Trial of Charles • Charles Web Debugging Proxy
2、打开app Charles，改一下代理的配置：
1）点击proxy => access control settings,设置所有的机器可以访问：0.0.0.0/0 ::/0
2) 点击proxy => enable ssl proxy 访问线上接口的时候，将内容不加密
3）如果某个接口一直抓取到，但我们又不想抓到该接口，可以右击该接口，选择忽略调该接口
4）打开proxy => setting，可以看到端口号默认是8888
3、在移动终端（android、iphone等）上安装charles的证书（为了抓https协议的接口）：确保笔记本和移动设备连的是同一个wifi：
安卓机上安装证书：
1）在mac笔记本上打开charles工具
2）手机打开设置 =》 找到Wi-Fi名A，将该网络设置代理，代理的ip是charles所在笔记本连接的Wi-Fi：A的ip地址，端口号是charles中proxy setting(port: 8888)
3）在浏览器中打开地址：http://chls.pro/ssl下载证书
4）打开设置 =》安全与隐私 =》更多安全设置 =》从SDK安装 =》受信任的凭据 =》用户，下面就有安装的charles proxy ca证书（安卓手机有的可以忽略掉这一步骤）
iphone上安装证书：
1）2） 3）同上
4）设置 =》 通用 =》描述文件与设备管理 =》 charles proxy ca => 安装
5）设置 =》 通用 =》 关于本机 =》证书信任设置 =》charles proxy ca
通过以上步骤，就可以通过charles抓到线上的数据了。
二、charles的Map remote和Map local的使用和区别
我们都知道map remote和map local都可以用本地文件替换线上的文件，然后就可以编辑本地文件代码，进行调试或者排查线上问题了。那我们该在什么场景下使用他们呢？
1、map local中文意思是映射到本地，即将线上具体的文件映射到本地文件。下面我们打开charles的map local界面看下：
点击tools => map local
打开后的界面如下
勾选 上上图的enable map local，点击add按钮，调出map local的编辑设置页面，如下图：
map from面板中的path值：/r/www/cache/static/protocol/https/amd_modules/san/dist/san_8828ec3.js
从上图 我们可以看出，map from面板设置的是线上具体文件路径的信息，map to设置的是替换线上文件的本地文件地址。
当我们想用本地文件替换线上具体的一个文件时候，可以使用map local功能。我们可以将线上文件的内容拷贝下来存档A，然后map local的编辑设置页面中的map to面板的地址就设置成文档A的地址，这个时候文档A就替换了线上文件内容，即线上文件实际中的内容用的是文档A的内容。这个时候我们就可以编辑文档A，从而定位问题。
注意：charles可以同时设置多个本地映射文件；当我们使用map local功能的时候，不需要在本地开服务器；测试环境和生产环境的可以用
2、map remote顾名思义就是将线上文件映射成远程文件
下面我们看下map remote的设置页面
点击tools => map remote
如下图，勾选上enable map remote,并点击add：
打开编辑面板：
如上图，map from面板设置的是线上文件路径信息，map to设置的是本地服务的文件信息。
map from面板中host设置的是线上服务的域名，path可以指定，也可以不指定。指定的话那么只会代理该域名路径下的文件，不指定的话，则代理该域名下的所有文件。如上图所示，则是指定了/r/www/cache路径下的所有文件都将被本地服务器的文件替换
map to面板设置远程服务的信息，即本地服务器的文件路径信息。host是当前网络的ip地址，port是当前开启服务器的端口号。path可以指定，也可以不指定。指定的话，就是用具体的路径下的文件替换线上文件
注意：使用map local功能，需要开启一个服务器。
在测试环境下，我们可以使用该功能，因为本地服务器的登录信息调的就是测试环境账号；
生产环境，要看具体情况猜能使用：比如，使用map local功能，如果接口正常返回数据，没有返回401等码值则可以使用map local；如果接口返回401等码值，则在生产环境抓包替换不能使用map local，需要使用map remote。因为在生产环境下，使用map local，只是借用了生产的壳子，账号上测试环境的，所以做生产账号校验时通不过。
1) tool => Map local功能
Map from：---线上文件信息
protocol：https（一般是该协议）
host：线上文件地址的域名
port：443
path：：线上文件地址路径
map to：----本地文件信息
protocol：http（本地跑起来的项目的协议一般是http）
host：网络ip地址
port：本地项目跑起来的端口号（用http-server起的服务端口号是8080）
path：如果替换的是文件，这里就写本地文件的地址
2) tool => Map remote功能
Map from：---线上文件信息
protocol：https（一般是该协议）
host：线上文件地址的域名
port：443
path：：线上文件地址路径
map to：----本地文件信息
protocol：http（本地跑起来的项目的协议一般是http）
host：网络ip地址
port：本地项目跑起来的端口号（用http-server起的服务端口号是8080，如果没有项目，只有替换的文件就需要http-server启动一个本地服务）
path：如果替换的是文件，这里就写本地文件的地址
注意：用map remote功能的时候，想用本地文件去替换线上文件，本地文件所在路径如D盘下的文件夹test下，则可以在test文件夹下全局安装http-server，然后启动该服务
cd test
npm i -g http-server // 在文件test下全局安装http-server
http-server ./ // 启动http-server服务器，端口号默认是8080注意1：生产上，用本地文件替换线上文件的时候，使用map local功能，对于替换的文件会发送head请求，由于请求方式是post，现在多了head请求导致替换失败
后来改成map remote，但是需要在本地文件的同级目录下安装http-server，并启动该服务，这个时候就可以替换了。或者自己项目启动了一个服务也是可以的
注意2：如果我们要抓包的页面的请求不再拦截策略的黑名单里面，可以用标装机去抓包；如果请求页面的域名是再拦截策略的黑名单里面，则得改成非标装机去抓包
注意3：生产上用本地文件替换线上文件，可能需要debug包才能替换，用release包可能替换不了
