使用CocosCreator开发H5手游大半年了

工作中调试占了很大比重,尤其在上线前

H5游戏调试有两个难点:环境和模块

环境困难是指不同操作系统、不同浏览器产生的表现差异

比如以下常见环境

Windows * chrome/firefox

Mac * chrome/safari

iphone/ipad * safari/qq微信浏览器

android * 各种安卓浏览器/微端webview

前两者对应PC端H5游戏玩家,以及开发时期的环境

后两者对应移动端H5游戏玩家

 

模块困难在于游戏包含了的众多功能

包括画面渲染,网络通信,内存管理,CPU优化和游戏逻辑本身

如果是音乐类游戏,还要加上音频处理

游戏做的越大这部分调试越复杂

对低端机的优化还需要另下一番工夫

 

以下就结合这两方面分析

总结我在项目中常用的7种调试方式

转载注明原文地址http://www.cnblogs.com/billyrun/articles/7499413.html

 

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

打开方式:

1. iPhone上，设置-》Safari-》高级-》打开web侦测器

2. Mac上，Safari偏好设置-》高级-》在菜单栏中显示开发菜单

3. 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游戏调试总结

以上一共介绍了我常用的七种调试手段

我们在开发过程中可以根据需求和习惯来选择

针对不同的问题选择最有效的调试方式

游戏开发的初期主要是填充内容,调试技巧往往会被忽视

然而上线前后需要大量快速解决问题的时候

调试的意义就体现出来了

 

参考文献

https://segmentfault.com/a/1190000009516058

http://blog.csdn.net/freshlover/article/details/42528643

http://blog.csdn.net/jscese/article/details/37928823

http://www.cnblogs.com/engineermind/p/4224789.html