在开发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
也可以扫描内推二维码在线投递,期待你的加入!~