H5 游戏调试技巧七合一归类总结

使用 Cocos Creator 开发 H5 手游大半年了，尤其是在游戏上线前，调试占了很大比重。

HTML5 游戏调试有两个重难点：「环境」和「模块」

「环境」困难是指不同操作系统、不同浏览器产生的表现差异，比如以下常见环境：

Windows * chrome/firefox

Mac * chrome/safari

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

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

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

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

「模块」困难在于游戏包含的众多功能，包括画面渲染、网络通信、内存管理、CPU 优化和游戏逻辑本身，如果是音乐类游戏，还要加上音频处理。游戏做的越大这部分调试越复杂，尤其是低端机的优化还需要另下一番工夫。

以下专门将我日常项目中常用的七种调试方式归类总结，分享给有需要的小伙伴。

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 文件即可。

打开 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 尤其是渲染计算复杂度高的游戏来说，无疑是一件利器，调试时会发现 Cocos Creator 处理 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)
})

以 Cocos Creator 里的 EditBox 为例，以上代码就可以实现注入调试。

举两个例子

想要知道游戏当前加载了多少张纹理，可以输入 alert(Object.keys(cc.textureCache._textures).length) 直接弹出来结果，同样适用于其他想要查询的全局变量。

除了查询，还可以改变游戏逻辑。比如想要改变缓存策略，可以输入 cc.game.config["noCache"] = true//false

当然，还可以做更加复杂的操作，比如改变函数绑定等等。

H5 游戏调试总结

以上总结了我常用的七种 H5 调试手段，我们在开发过程中可以根据需求和习惯来选择，针对不同的问题选择最有效的调试方式。游戏开发的初期主要是填充内容，调试技巧往往会被忽视，然而上线前后需要大量快速解决问题的时候，调试的意义就体现出来了。