移动端开发调试
一、ios调试，方案一:本地链接有线网，不需要开网络共 享
1、本地电脑链接有线网，确定能正常上网; 2、开启charles→Tools→MapRemote (调试本地node),如图设置:
3、查看 Charles 端口
4、手机链接无线网(随意)，设置代理 ip 为电脑 有线 ip ,端口为 charles 的端口;
5、确认手机这集代理后能正常上网即可，打开 app 开始调试本地代码;
二、ios篇(设备MAC + iphone):
方法 1: (1)、首先电脑要连接有线网确认链接通;
(2)、电脑里面共享网络(系统偏好设置 → 共享)
然后出现以上面板，选择以上选项;
(3)、点击 “Wi-Fi 选项...”设置无线局域网络名称和密码(即把电脑里的有线网共享到无线网，自己创建一 个 wifi 名称 ，密码自定义也可以不设置;):
(4)、设置完成后，点击“好”，回到初始共享面板，如下:
然后勾选左侧列表中“互联网共享”选项，此时，用手机既可以搜索出刚新建的无线网; (5)、手机打开 “设置→无线局域网”，搜索刚才创建的无线网 x,然后连接此网络，连接成功后，先保证手机
能够再此局域网能够正常上网，此时说明 无线网和有线网已经成功共享了。
(6)、在电脑命令行执行 ifconfig ，查看 wifi 的网段，再查看本机在这个网段(新建的 wifi)的 ip 是多少:
【 此时会输出输出了很多接口:
-
lo 回环接口(loop back) 或者 本地主机(localhost)
-
gif 通用 IP-in-IP隧道(RFC2893)
-
stf 6to4连接(RFC3056)
-
en 以太网或802.11接口 (en开头的是有线网)
-
fw IP over FireWire(IEEE-1394), macOS特有
-
p2p Point-to-Point 协议
-
awdl airdrop peer to peer(一种mesh network), apple airdrop设备特有
-
bridge 第2层桥接 (网桥)
-
vlan 虚拟局域网络 】
(7)、然后打开电脑的 charles(抓包软件任意一个都可以)，然后在电脑上随意开启一个页面看看 charles 能否 成功捕获，如果捕获到，则说明 charles 能正常工作，之后查看 charles 监听的是本 机的那个端口 proxy — Proxy Settings(默认 8888);
(8)、然后打开手设置网络 无线网 右侧是(一般圆圈叹号)进入，下面有手动设置代理，把刚查看到的电脑 在局域网中的 ip 和 charles 中现实的端口 填写，链接工程即可;
(9)、可以在 webview 里面刷新页面，charles 进行抓包，将需要调试的 js 文件 map 到本地:
选择“Map Local...”，出现下面的面板:
选择本地对应的文件，然后修改本地文件，刷新即可更新查看效果。
三、调试iphone中的页面:
1、用数据线将手机和 Mac 连_=8E_好之后，iPhone 的“设置” - “safari” - “高级” - 打开“JavaScript” 和 “web 检
查器”;
2、打开 Charles 设置端口(默认 8888),设置手机代理到 Mac 的 Wifi 的 ip,此时 Charles 会提示是否允许拦截
iphone 网络请求，选择“允许”;
3、Mac 中 Sarari 浏览器，选择“偏好设置”-“高级”-在菜单栏中显示“开发”菜单;
4、Sarari 浏览器 选择菜单栏中“开发”，选择你的 iphone， 即可查看，调试页面;
iPhone的“设置” - “Safari” - "高级" - 打开“JavaScript” 和 “Web检查器”
四、Android篇(设备MAC + android手机):
(1)、首先保证本机服务能够被其他设备访问(方法一:链接无线网，此时需要在公司帮助平台申请加入白名单；方法二:链接有线上网；)
(2)、如果申请白名单，需要提供本机 ip 和 mac 地址(点击【电脑苹果图标→关于本机→系统报告→网络→位置】查看硬件 (MAC) 地址)到 公司帮助平台，如果不需要申请白名单则忽略步骤此步 骤;
(4)、在 MAC 上打开 Charles，要截取手机上的网络请求，我们首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择“Proxy”->"Proxy Settings"，填入代理端口 8888，并且勾 上"Enable transparent HTTP proxying" 就完成了在 Charles 上的设置;
(3)、在 Charles 中添加手机的 ip，点击[Proxy → AccessControlSettings...]，弹出如下的面板:
如果“IP Range”里面没有当前调试手机的 ip,则需要将其添加进去，点击面板中的 [add]按钮，编辑后， 再点[ok]即可;
(4)、手机设置打开无线网络，选择链接成功后，设置代理链接本机的 ip 和 Charles，在控制台输入 ifconfig 查看本机 ip,如下:
(5)、用数据线将手机和电脑连接，此时手机会弹出已弹框:如下
点击“确定”;
(6)、进入手机“开发者选项 → USB 调试”，选择确定:
(7)、打开 chrome 的控制台，进入下面的面板,设置 chrome 调试插件:
(或者进入chrome://inspect/#devices 链接，设置如下:)
(8)、在步骤(7)中点击 "Inspect"后即可弹出调试窗口，进行调试: (9)、在 Charles 中，将需_=A6_调试的 js 文件 mapping 到本地，即可~
