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