Hybrid----Debugging Web Content on iOS(在iOS设备上调试网页内容)

在iOS设备上调试网页内容

用iOS 6已上版本的Safari，可以通过Mac调试移动网页内容，你可以直接看到JavaScript的错误，编辑HTML属性，改变CSS属性，甚至可以在mac机上完成开发，这片文章描述了如何使用web inspector调试网页内容。

你应该使用桌面和数个iOS设备测试网页内容，如果不能做到真机测试，可以使用iOS模拟器，因为在iOS系统和OS X系统浏览器是有差异的，你应该份分别在iPhone iPad或其模拟器上测试。当在任意一个平台的Safari测试时，均可使用Web Inspector 调试网页内容。

第一步：在iOS设备上开启Web Inspector

Web Inspector 提供有价值的监测对于可能发生错误的网页内容，并且Web Inspector可以被OS X的Safari访问，你可以使用它去监测之前被载入到Safari或webView中的网页内容。（意思是可以在Mac机上通过Safari的Web Inspector调试iOS设备如iPhone上的safari网页内容，并且内嵌在App中的UIWebView也可以通过这种调试方法）

To enable Web Inspector on iOS

1. Open the Settings app.

2. Tap Safari.

3. Scroll down and select Advanced.

   
   

4. Switch Web Inspector to ON.

   
   

从Mac上监测

在开启了iOS设备上的Web Inspector,用USB线连接设备到你的Mac机，在Mac机上的Safari的Develop菜单项会显示，如下图所示，如果你的iOS设备名没有显示在Develop菜单下，可以试着重启Safari或重连USB线。（若Safari中无Develop菜单项，可通过Safari->Preference->Advanced->Show Develop menu in menu bar）.

Figure 12-1  Inspecting a web page from the Develop menu

使用JavaScript与设备进行交互

在Web Insepctor debug console面板下，可以通过Mac机发送JavaScript命令至你的设备，通过debug console可以访问被监测页面的变量、函数和DOM树，如下图：

注：简单来说就是在iOS设备中的HTML页面，可以通过console.log("myVariable is "+ myVariable)，打印log至mac机的上图窗口，mac机可以在上图窗口中输入JavaScript命令，向页面发送js，如window.alert();  结果如下图

Figure 12-5  Alert dialog triggered from the debug console