用HTML5编写的Web页面在完成PC端的调试之后,在发布到移动设备之前,需要进行必要的兼容性调试。
Apple官方提供的利用Mac上Web Inspector+IOS上safari联合调试为开发者提供了便利的手段。
有点类似安卓的真机调试,即调试窗口运行在PC下,交互在移动终端进行。PC与移动终端以USB连接交换信息。
步骤如下:
启用Mac端safari的开发模式
在Mac下,进到safari->偏好设置->高级,勾选 在菜单栏显示”开发“菜单
启用ios上safari的Web检查器
在ios下,进到 设置->safari->高级,勾选 Web检查器
连接Mac电脑与ios设备
将ios设备通过usb接口连接到mac电脑,然后进到 开发 菜单,会显示当前已经连接的ios设备。
在ios的safari打开页面,在Mac端也会显示当前该ios设备可调试的页面,选中页面进入对该页面的调试。
调试页面
接下来的界面,对于PC端的web开发人员就相当熟悉了:),无非是交互是在ios设备上进行,而调试在Mac下进行。体验优点类似多屏调试,调试器放在另一个独立显示器下,很爽!
下面截图显示了,最常用的设置一个断点,调试器停在断点处,此时可以查看DOM元素和变量。
而ios设备则处于阻塞等待状态。
更多信息
可以参见Apple官方文档。