H5移动端调试攻略——超实用

大家好,们基于H5页面承载的平台,遇到很多设备的兼容性问题,针对特殊机型,我们并不能直接通过浏览器调试出其问题所在 。因此,需要我们在真实的设备场景下,采用真机调试的方法,进行进一步问题的分析 。
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 调试