使用Safari遠程調試iOS設備網頁

最近在作HTML 5遊戲時，發佈到手機上訪問網頁老是莫名其妙出現問題，苦於沒有remote debug功能一直沒有查找到問題。

這邊博客詳細介紹了iOS, Android, Windows Phone的調試方法：

http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/

1. 使用方法

在Mac下鏈接iPhone試了一下確實不錯，

環境：

Mac OS 10.9 Mavericks, iOS 8.1

步驟：

1. iPhone上，設置-》Safari-》高級-》打開網頁偵測器

2. Mac上，Safari偏好設置-》高級-》在菜單欄中顯示開發菜單

3. 鏈接手機，在手機Safari上打開網頁，而後添加到主屏幕（沒法遠程調試Sarafi直接打開的網頁，只能測試添加到主屏幕的），從主屏幕上的快捷圖標打開網頁

4. Mac上Safari的開發菜單欄，下拉能夠看到鏈接的設備，懸停能夠看到打開的網頁，點擊打開Web檢查器

 

2. 備忘

Web檢查器功能跟firefox的調試功能差很少，能夠設置斷點，查看變量，不過沒發現Watch變量功能。

console的log查看也挺不方便的，爲了方便查看log，我改寫了一下log函數，綁定在console上，將日誌push到一個Array，這樣在Web檢查器能夠很快找到因此log；release項目時使用uglifyjs的drop_console能夠直接去除全部log調用。

重寫一下window.onerror方法，能夠更方便的抓取報錯，只要在重寫的函數打個斷點，報錯都會進來，能看到報錯的堆棧信息。

window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error) {
　　// your handler
}

對於加載遊戲就報錯能夠先設置斷點，而後在Web檢查器點刷新，若是在iOS設備上直接按Home鍵會直接結束Web檢查器，沒法查找。