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

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

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

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

Charles主要功能:

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

一. 将Charles设置成系统代理

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

二、移动端抓包

Proxy -> Proxy Settings
默认端口是8888

3. 查看本地IP

4.配置手机代理

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

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

三、代理到本地

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

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

找到项目样式
右键选中
选择 Map Remote

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

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

Tools -> Map Remote

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

修改代码调试项目

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

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

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

招聘贴

字节跳动招人啦！

职位描述：前端开发（高级）ToB方向—视频云（Base: 上海、北京）

1、负责音视频点播/直播/实时通信等多媒体服务产品化以及业务云平台建设；

2、负责多媒体质量体系、运维体系建设及系统开发工作；

3、擅长抽象设计、工程化思维，专注交互、打造极致用户体验。

职位要求

1、计算机、通信和电子信息科学等相关专业优先；

2、熟练掌握各种前端技术，包括 HTML/CSS/JavaScript/Node.js 等；

3、深入了解 JavaScript 语言，使用过 React 或 Vue.js 等主流开发框架；

4、熟悉 Node.js，了解 Express/KOA 等框架，有大型服务端程序开发经验者优先；

5、对用户体验、交互操作及用户需求分析等有一定了解，有产品或界面设计经验者优先；

6、有自己的技术产品、开源作品或活跃的开源社区贡献者优先。

职位亮点

视频云团队依托抖音、西瓜视频等产品的音视频技术积累和基础资源，为客户提供极致的一站式音视频多媒体服务，包括音视频点播、直播、实时通信、图片处理等。对内作为视频技术中台，服务内部业务；对外打造产品化的音视频多媒体服务解决方案，服务企业级用户。

团队具备规范的项目迭代流程、完善的项目角色配置；技术氛围浓厚，拥抱开源社区，定期分享，让大家能够伴随业务快速成长，用技术改变世界！

投递方式

可直接发送简历至：yuanyuan.wallace@bytedance.com

也可以扫描内推二维码在线投递，期待你的加入！~

Charles抓包—App资源代理