使用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檢查器，無法查找。