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