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的包的话，可关闭此配置，这样不会出现太多的数据看着比较乱。)

2、移动端抓包

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

3. 查看本地IP

4.配置手机代理

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

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

3、代理到本地

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

我线上的项目使用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;
}
复制代码