最近在做HTML 5游戏时,发布到手机上访问网页总是莫名其妙出现问题,苦于没有remote debug功能一直没有查找到问题。
这边博客详细介绍了iOS, Android, 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检查器,无法查找。