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 InspectorWeb 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