本地代码运行在移动真机上-移动端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 和 微信公众号的调试
作者地址