1、调试策略
由于chrome调试iphone比较麻烦，个人推荐的调试策略如下：
- 安卓手机 – chrome浏览器
- iPhone – safari浏览器
2、具体步骤
2.1 iPhone
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
- 如果你的菜单栏没有“开发”选项，可以到左上角 Safari -> 偏好设置 -> 高级 -> 在菜单栏中显示“开发”菜单。
- 在弹出的 Safari Developer Tools 中调试
(图可以参考引用文献中的图)
2.2 Android
- 使用 USB ／typeC数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
(图可以参考引用文献中的图)
3、代理调试步骤
3.1 背景
如果有需求需要配 Hosts 才能访问的开发环境页面，而手机在默认情况下是没有权限修改 Hosts 文件的，这里就需要两个软件：SwitchHosts和Charles。
3.2 具体步骤
- SwitchHosts打开，选择开发环境的host
- Charles打开，点击Help->Local IP Address查看本地IP；点击Proxy->Proxy Settings查看端口号(默认是8888)
- 手机找到“设置”进入，设置->WLAN->无限网Name->修改网络设置->显示高级选项->代理服务器->手动->输入代理主机名，即第7步中的IP地址->输入代理服务器端口，即第7步中的端口号->点击保存
（手机通过连接Charles代理来访问开发环境下的host。其中每部手机修改网络配置的步骤名称可能略有不同，但基本都相近。） - 手机访问需求页面：
第一种：按照正常的app业务流程走到该页面；
第二种：在chrome上安装一个草料的插件，将访问页面的url利用草料转成二维码，手机通过扫描二维码访问该页面。