通過Mac遠端除錯iPhone/iPad上的網頁

admin發表於2017-02-22
Mac除錯iPhoneiPad網頁

在Mac/PC上的瀏覽器都有 Web 檢查器這類的工具（如最著名的 Firebug）對前端開發進行除錯，而在 iPhone/iPad 由於限於螢幕的大小和觸控式螢幕的使用習慣，直接對網頁除錯非常不方便，所以一直沒有 Web 檢查器這一類工具，iOS 6的釋出解決了這個問題。

iOS 6 給 Safari 帶來了遠端的 Web 檢查器工具（Remote Web Inspector），可以通過模擬器或者真實的裝置（通過 USB 連上 Mac）進行除錯。下面我講講詳細的除錯過程：

第一步:

首先要開啟開啟 iPhone/iPad 上的 Safari 的遠端除錯功能，"通過 設定 > Safari > 高階"開啟：

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205323qzb0wpwtw502z2ea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二步:

然後開啟Safari，開啟你要除錯的網頁，當然原生應用中通過 WebView 開啟的網頁也是可以除錯的。

第三步:

最後把iPhone或者iPad通過資料線連上Mac電腦，開啟桌面版的Safari（目前iOS 6的Safari 遠端除錯只支援通過Mac上的桌面版的Safari進行，Safari for Windows 目前還沒有此項功能），點選開發選單，選擇你除錯的iPhone/iPad的裝置名，選擇除錯的網頁。

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205403x3zgjanqkjrngmai.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第四步:

最後就是呼叫桌面版的 Safari 的 Web 檢查器對 iPhone/iPad 上的 Safari 應用進行除錯:

a:3:{s:3:\"pic\";s:43:\"portal/201702/22/205452ybart4ax4yiix4bp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這個除錯過程和我們平常在 Mac/PC 上除錯基本一樣，比如可以對 HTML 和 CSS 做些實時的改動，檢視修改後的效果。檢視 cookie，本地儲存，session 等一些資料。檢視 WebApp 的效能，網路請求等，也可以檢視所有錯誤和警告資訊對程式進行修正。

當然我們可以通過它來除錯 Javascript，設定斷點，定義未捕獲的意外等。也可以訪問 Console，直接執行 Javascript 程式碼。

另外它還支援觸控檢查（Touch to inspect）：啟用檢查器上的手型圖示，就可以通過在 iPhone/iPad 上觸控，就能立即找到檢查器對應的 DOM 元素。

相關文章