mac笔记本上，charles的安装与使用

下面介绍下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包可能替换不了

一些关于map local和map remote功能讲解的文章：

charles 的map remote 和map local的功能和使用方法_十月有利的博客-CSDN博客_maplocal作用

Charles的Map Remote和Map Local功能和使用介绍 - niuzhigang - 博客园