基于目前主流场景——H5页面内嵌在APP端的应用，我们基于H5页面承载的平台，遇到很多设备的兼容性问题【如：ios13.6.1页面一直循环请求问题、Android5.0 + ios10白屏问题等】，针对特殊机型，我们并不能直接通过浏览器调试出其问题所在。因此，需要我们在真实的设备场景下，采用真机调试的方法，进行进一步问题的分析。

1. 真机调试

（1）IOS 调试

对于mac电脑，ios可以直接使用USB，将真机连接在MAC电脑上，通过Safari浏览器调试。

手机的准备工作：

• 打开设置，找到Safari浏览器
• 在 Safari 浏览器中找到高级
• 在高级中找到 web检查器和JavaScript
• 将web检查器和JavaScript打开

手机准备就绪后，开始在电脑上操作：

• 首先打开safari的开发调试，在偏好设置中将开发的选项框选中。此时就会看到开发的菜单栏。
• 将手机连接在电脑上后，打开Safari浏览器，手机端打开我们的H5页面，在Safari中菜单栏中找到开发
• 在开发下拉选项卡中找到连接的设备信息
• 选择设备后就能看到右侧的我们打开的对应H5的页面地址，选中后会发现手机设备中也会有选中标识。
• 点击后就会打开调试弹窗，上方有调试的选项：包括控制台、元素、以及来源等
• 网络对应的就是资源的加载，和chrome的调试工具类似，可以查看接口，静态资源等

注意事项：

• 如果出现工具不全等，建议升级Safari版本重试。
• 由于APP包本身的问题，导致不是在本地IDE打出来的包，直接连接调试APP中的H5页面，会无法获取到检查的应用程序。

（2）Android 调试

• 对于Android4.2以及以后的版本，默认情况下开发者选项是隐藏的，要启用开发者选项，需要在设置中点击关于本机，然后点击版本号7次，就会有弹窗提示，打开开发者选项；
• 在开发者选项中，打开USB调试开关；将电脑与手机连接，在手机上选择允许电脑连接；【注：有的充电线是只能充电的作用，需要的是可以USB调试的数据线，前者打开USB，无响应】

对于mac，需要安装android和adb配置，才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb，参考以下文章：https://www.jianshu.com/p/61339291c9e2

• 打开AndroidStudio，在File中打开Project Structure，复制sdk路径

然后打开终端，输入以下命令：

touch .bash_profile