Charles抓包—App资源代理

在开发Hybrid App的时候，会遇到因为native环境不同，出现的样式不对及代码bug。

因为需要写一点原生代码与native进行交互，而安卓和ios的交互方式不一样并且一定要在app中调试，所以会遇到反复修改提交打包等待发版然后在app上查看效果的等待及多余步骤。

或者打包一个嵌入了本地链接的app在手机上自己调试。中间多了一步麻烦app同事的步骤，次数多了怕被白眼。

于是！我们要自力更生，能自己解决的问题绝不麻烦别人。于是我想到了Charles代理。

Charles主要功能:

1. 将Charles设置成系统代理
2. 截取移动设备上的网络请求包
3. 代理转发
4. 支持https请求抓包

一. 将Charles设置成系统代理

1. 启动Charles客户端
2. Proxy -> macOS Proxy(Charles 是通过将自己设置成代理服务器来完成抓包的，勾选系统代理后，系统本地发出去的请求都能被截取下来。如果只抓取APP的包的话，可关闭此配置，这样不会出现太多的数据看着比较乱。)

二、移动端抓包

1. Proxy -> Proxy Settings
2. 默认端口是8888

3. 查看本地IP

4.配置手机代理

设置代理之后，Charles字移动端设备和服务器之间担当了中转的任务。拦截了设备的请求后，Charles可以转发给服务器也可以代理到本地。

打开app访问页面，就可以看到抓包后的数据了。

三、代理到本地

接下来就是最关键的，我们在请求中寻找需要代理的资源。

我线上的项目使用webpack+react打包的，所以只需要修改关键的js和css就好了。

1. 找到项目样式
2. 右键选中
3. 选择 Map Remote

4.修改代理路径，Host可以填本地ip/127.0.0.1/localhost

端口号根据实际情况填写。因为我的项目运行在9000端口，所以这里的Port我填9000。

5. Tools -> Map Remote

我们可以通过勾选Enable Map Remote 按钮禁用或者打开代理。

6. 修改代码调试项目

将商场导购的字体颜色变成红色。

等待编译完成，app内嵌页面的字体也通过样式代理，字体变成了红色。

.guide-name {
    font-size: 30px;
    color: red;//#333333
    width: 95%;
    @extend .txt_eclip;
}
复制代码