项目预览调试

    在游戏开发过程中我们可以随时点击编辑器窗口正上方的 预览 按钮,来看到游戏运行的实际情况。

    • 最左边的下拉菜单中可以选择预览的平台,目前支持使用 浏览器模拟器 预览。
    • play:预览按钮,点击可运行预览
    • 预览 按钮右侧可以选择预览的场景,下拉框中会列出项目中所有的场景,默认使用 当前场景

    • play:刷新按钮,点击该按钮可刷新所有已打开的预览页面。如果想要在执行保存场景操作后自动刷新预览页面,在编辑器主菜单中选择 Cocos Creator -> 偏好设置 -> 预览,然后勾选 保存场景自动刷新预览 即可。

    选择使用 浏览器 预览后,点击旁边的 预览 按钮,会在默认桌面浏览器中直接运行游戏的网页版本。推荐使用谷歌浏览器(Chrome)作为开发过程中预览调试用的浏览器,因为谷歌浏览器(Chrome)的开发者工具是最为全面强大的。

    浏览器预览界面的最上边有一系列控制按钮可以对预览效果进行控制:

    • 最左边选择预览窗口的比例大小,来模拟在不同移动设备上的显示效果,可以在 Cocos Creator -> 偏好设置 -> 设备管理器 中手动添加设备分辨率。
    • Debug Mode:可以选择脚本中哪些级别的日志会输出到浏览器控制台中
    • Show FPS:用于选择是否在左下角显示每秒帧数和 Drawcall 数量等调试信息
    • FPS:限制最高每秒帧数
    • Pause:暂停游戏

    Cocos Creator 3.0 支持自定义网页预览功能,详情请参考 网页预览定制工作流程

    浏览器兼容性

    Cocos Creator 开发过程中测试的桌面浏览器包括:ChromeFirefox(火狐)QQ 浏览器,其他浏览器只要内核版本够高也可以正常使用,对部分浏览器来说请勿开启 IE 兼容模式。

    移动设备上测试的浏览器包括:Safari(iOS)Chrome(Android)QQ 浏览器(Android)UC 浏览器(Android)

    使用浏览器开发者工具进行调试

    以谷歌浏览器为例,点击编辑器主菜单中的 开发者 -> 开发人员工具 便可打开开发者工具界面。在开发者工具中,我们可以查看运行日志、打断点进行调试、在调用堆栈中查看每一步各个变量的值、甚至进行资源加载和性能分析。

    要学习使用开发者工具进行调试,请阅读 ,或其他浏览器的开发者工具帮助。

    模拟器

    选择使用 模拟器 预览后,会使用 Cocos Simulator(桌面模拟器)运行当前的游戏场景。使用模拟器运行游戏时,脚本中的日志信息(使用 打印的内容)和报错信息会显示在 控制台 面板中。

    使用 模拟器 预览时,支持自动打开调试窗口进行调试,可在 Cocos Creator -> 偏好设置 -> 预览 中设置,详情请参考 。

    simulator

    调试手机端的预览效果有以下方式:

    • 使用 浏览器开发者工具的手机端预览模式

    • 扫描预览二维码

      将鼠标移动到编辑器工具栏左边的 IP 预览地址上,会显示一个预览的二维码,用手机扫描即可。