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

待我称王封你为后i 2022-12-27 15:27 336阅读 0赞

下面介绍下mac笔记本上的抓包工具charles的安装与使用

**一、charles的安装与基本使用**

1、首先在mac笔记本上安装软件charles，官网地址：[Download a Free Trial of Charles • Charles Web Debugging Proxy][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）设置 =》 通用 =》 关于本机 =》证书信任设置 =》ccharles proxy ca

通过以上步骤，就可以通过charles抓到线上的数据了。

**二、charles的Map remote和Map local的使用和区别**

我们都知道map remote和map local都可以用本地文件替换线上的文件，然后就可以编辑本地文件代码，进行调试或者排查线上问题了。那我们该在什么场景下使用他们呢？

**1、map local中文意思是映射到本地，即将线上具体的文件映射到本地文件。**下面我们打开charles的map local界面看下：

点击tools => map local

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16][]

打开后的界面如下

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]勾选 上上图的enable map local，点击add按钮，调出map local的编辑设置页面，如下图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

map from面板中的path值：[/r/www/cache/static/protocol/https/amd\_modules/san/dist/san\_8828ec3.js][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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

如下图，勾选上enable map remote,并点击add：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

打开编辑面板：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

如上图，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_-CSDN_maplocal]

[Charles的Map Remote和Map Local功能和使用介绍 - niuzhigang - 博客园][Charles_Map Remote_Map Local_ - niuzhigang -]

[Download a Free Trial of Charles _ Charles Web Debugging Proxy]: https://www.charlesproxy.com/latest-release/download.do
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221120/07ce01a24a104d948688b4877a711cf6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20221120/304850e962da48dca542a03386de08e0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20221120/9269c9401bb74d48ae3cd801dd69557f.png
[r_www_cache_static_protocol_https_amd_modules_san_dist_san_8828ec3.js]: https://pss.bdstatic.com/r/www/cache/static/protocol/https/amd_modules/san/dist/san_8828ec3.js
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20221120/6811cc48a44c4ca38e586d1dabc71e8a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20221120/1f0ede5daf014f9e81d1844824916bda.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LWP6Iqx6LWP5pmv6LWP5pe25YWJ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20221120/b5ba34453cb14ec8af4a5502840879b3.png
[charles _map remote _map local_-CSDN_maplocal]: https://blog.csdn.net/weixin_43760482/article/details/89385024?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
[Charles_Map Remote_Map Local_ - niuzhigang -]: https://www.cnblogs.com/nzg-noway/articles/6524952.html