用Mac上的Web Inspector调试ios上的Web页面

用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官方文档。