使用CocosCreator开发H5手游大半年了
工作中调试占了很大比重,尤其在上线前
H5游戏调试有两个难点:环境和模块
环境困难是指不同操作系统、不同浏览器产生的表现差异
比如以下常见环境
Windows * chrome/firefox
Mac * chrome/safari
iphone/ipad * safari/qq微信浏览器
android * 各种安卓浏览器/微端webview
前两者对应PC端H5游戏玩家,以及开发时期的环境
后两者对应移动端H5游戏玩家
模块困难在于游戏包含了的众多功能
包括画面渲染,网络通信,内存管理,CPU优化和游戏逻辑本身
如果是音乐类游戏,还要加上音频处理
游戏做的越大这部分调试越复杂
对低端机的优化还需要另下一番工夫
以下就结合这两方面分析
总结我在项目中常用的7种调试方式
1.chrome开发者工具[代码断点/堆栈内存/CPU/NETWORK]
打开方式:chrome->更多工具->开发者工具(或点击F12)
优点:工具强大,使用方便,可调试多个模块
缺点:可以模拟移动设备但效果一般,仅适用于开发阶段
chrome开发者工具是开发过程中最常用的
网上也可以查到详细的使用方法,截图中标注了常用功能
(1)Elements可以查看各个dom节点和css
(2)Console可以查看各级别log,输入js代码调试
(3)Sources可以查看js代码(ctrl+p),断点调试,新版本chrome还可以异步断点/pause on exceptions
(4)Network查看资源加载,http请求,缓存使用情况,加载用时等等
(5)Performance查看CPU使用情况,分析函数执行频率,优化性能
(6)Memory查看heap内存情况,检查代码内存泄漏(只包含脚本占用的内存,不包括图片声音的部分)
(7)模拟移动设备表现,模拟不同分辨率适配
2.chrome任务管理器[监视内存/显存]
打开方式:chrome->更多工具->任务管理器
优点:方便监视网页内存/显存/CPU情况
缺点:仅适用于开发阶段,仅适用于PC端
首先要说清楚是chrome的任务管理器不是windows的任务管理器
任务管理器可以监视各个页签内存CPU使用情况
尤其内存分类很详细
可以很容易的看出来:
上传到webgl的纹理占用了GPU内存
代码数据占用JavaScript内存
WebAudio加载的音频文件占用页签内存
在资源加载/卸载时,监视页面内存情况,十分好用
既能检查内存泄漏,还能看到内存峰值
ps.看过一些帖子讲纹理尺寸是否是2次幂的问题
通过GPU内存监视很容易看出来x*y大小的纹理到底占多少内存
3.chrome远程调试+手机chrome/安卓浏览器/app内嵌webview
打开方式:chrome://inspect/#devices 设备开启usb调试模式并连接电脑
优点:移动端调试(安卓机为主),工具强大,可调试多个模块,可调试线上问题
需要配置host文件
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com
首先讲一下chrome远程调试的配置
在不FQ的情况下配置host文件即可
baidu里有人说一定要FQ访问某站点,其实不然
打开chrome://inspect之后
可以看到如图设备名称以及设备正在访问的页面
上面的框框里是安卓默认浏览器中的页面(需要安卓系统4.0以上才能远程调试)
下面的框框里是H5游戏微端内嵌webview中的页面(安卓系统4.4以上才能远程调试)
我这边使用的小米4系统是4.4.4,大概2015年以后上市的安卓机系统都比这高了
ps.内嵌webview微端app还需要在代码中声明调试模式
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); }
点击inspect后出现调试面板
与chrome开发者工具的调试面板功能基本一致
可以断点调试手机页面等等,十分强大
对于已上线H5游戏,如果在安卓平台发现bug
应直接使用这种方式查找问题
4.chrome插件webgl inspector
打开方式:chrome->webgl插件
优点:监视最详细的webgl信息
缺点:仅使用于PC版chrome
webgl inspector是chrome的一款插件
是webgl渲染模式下的强力调试工具
这款插件的安装稍微有点麻烦(不FQ的话)
下载和安装可参考以下两个地址
http://www.cnplugins.com/devtool/webgl-inspector/download.html
http://www.cnplugins.com/tools/how-to-setup-crx.html
安装好之后,点击GL图标就可以打开调试面板
可以看到面板中包括当前webgl服务端中的全部纹理
以及纹理的属性/buffer信息/shader代码等等
对于2D/3D尤其是渲染计算复杂度高的游戏来说,无疑是一件利器
调试时发现CocosCreator处理label文字也是生成了纹理
ps.网络传输级别的纹理加密,遇到这个插件貌似就彻底破功了
如果老板硬要H5游戏做资源加密?拒绝他之前给他试试这个
5.safari远程调试+iphone/ipad
打开方式:
-
iPhone上，设置-》Safari-》高级-》打开web侦测器
-
Mac上，Safari偏好设置-》高级-》在菜单栏中显示开发菜单
-
Mac上Safari的开发菜单栏，下拉可以看到连接的设备，悬停可以看到打开的网页，点击打开Web检查器
优点:移动端safari浏览器调试,可调试线上问题
缺点:仅限ios系统/safari浏览器
safari远程调试和chrome远程调试很相似,网络请求/脚本断点/控制台工具等等
设置正确之后很容易操作
ios上面有时会遇到独特的问题
可以直接通过这种方式进行调试
ios玩家占了半壁江山,也可以使用safari调试工具做一些深入分析优化
6.adb命令行调试工具[安卓机内存/CPU监控]
所需工具:安卓sdk
打开方式:设备usb连接电脑(开启usb调试),PC命令行找到sdk目录下platform-tools/adb.exe然后执行命令
优点:监视安卓进程内存/CPU情况
缺点:仅限安卓机,只能监视有限信息
命令:
adb shell top -m 10 查看当前系统进程前十位
adb shell top -t -m 10 查看当前系统线程前十位
这个工具可以测试安卓机不同浏览器/内嵌webview的内存/CPU表现
上文提到chrome任务管理器也可以监视网页内存/CPU
但基本只是在开发阶段能用
上线之后由于设备浏览器不同,往往会遇到PC端不曾遇到的内存/CPU问题(踩了不少坑…不多提了)
我们知道手机H5游戏占用的系统资源,不仅来自游戏页面,还包括浏览器本身
许多浏览器打开空页面都要占用上百兆内存
adb工具显示的内存以进程/线程为单位,信息是最有借鉴性的
以上图为例,可以看到当前我的猎豹浏览器CPU使用率36% , 内存150MB左右
每秒钟信息都会更新
游戏如果存在内存泄漏
这里一定可以监测到
7.JavaScript注入调试
JS中有一个神奇的函数eval
eval(commandString)可以立即将传入字符串当做js语句执行
这种调试方法最灵活,不依赖任何工具,全平台试用
同时功能也最薄弱,只能依靠注入的脚本做有限操作
具体来讲,游戏里需要有一个隐藏面板(只有开发者知道如何打开)
面板除了提供log显示,还可以加上一个input标签(EditBox)
this.editBox.on('editing-did-ended' , function(event){ var cmd = event.target.getComponent(cc.EditBox).string eval(cmd) })
以CocosCreator里的EditBox为例
以上代码就可以实现注入调试
举两个例子
想要知道游戏当前加载了多少张纹理,输入
alert(Object.keys(cc.textureCache._textures).length)
直接弹出来结果,同样适用于其他想要查询的全局变量
除了查询,还可以改变游戏逻辑
比如想要改变缓存策略,可以输入
cc.game.config[“noCache”] = true//false
当然,还可以做更加复杂的操作
比如改变函数绑定等等
H5游戏调试总结
以上一共介绍了我常用的七种调试手段
我们在开发过程中可以根据需求和习惯来选择
针对不同的问题选择最有效的调试方式
游戏开发的初期主要是填充内容,调试技巧往往会被忽视
然而上线前后需要大量快速解决问题的时候
调试的意义就体现出来了
好了就写这么多吧,欢迎交流~
QQ:393422044 Email:fkrfkrfkr@163.com
