本地代码运行在移动真机上-移动端web-charles

写在前面


作者地址
目的:将本地代码运行在移动真机上
随着智能机的普及,移动端开发的需求越来越多。很多公司为了节省成本,App会采取混合开发,一些变动频繁的页面,会采取webview技术。而且微信公众号页面的开发也基本上使用的传统的前端技术,但是它们有个共同的槽点,就是真机调试会比较麻烦。我们在开发阶段,本地调试的时候,将代码产生的效果,实时的反应在真机上呢。本篇文章就是介绍如何使用 mac的SSS+级 抓包工具 charles,解决这个问题

硬件软件支持

1、mac笔记本
2、手机一部
3、charles

链接:https://pan.baidu.com/s/1TxU-CZ95LigeYpoInA7gmw 密码:8d2p

一、用charles 拦截手机请求

1、手机和pc在同一局域网
查看pc 的ip地址,打开终端输入

ifconfig
image.png

2、使用charles代理pc 并设置charles的端口

image.png

勾选macOS Proxy

image.png

点击查看charles端口

image.png

可以自行设置 也可以使用默认的3333端口

3、手机连接与pc一样的wifi,并设置代理


image.png

image.png

填上之前查到的pc ip地址 端口要填charles的 这个时候手机浏览的所有互联网地址都能查看到

二、将本地代码资源 映射线上资源

用vue项目举例
起的服务一般是http://localhost:8080

找到charles的Tools菜单下的 Map Remote
1、


image.png

2、


image.png

添加两条映射关系保存并启用后,手机重新访问要映射的线上地址,就会发现加载的资源是本地的代码资源。
注意一点的是,这个不支持代码的热加载,本地修改代码后,手机得退出App重新请求一次。但是相对来说真机调试还是比较方便的。
这个方法还是比较适用于 webview 和 微信公众号的调试
作者地址

你可能感兴趣的:(本地代码运行在移动真机上-移动端web-charles)