Cocos Creator 如何进行断点调试?

最近在写游戏的时候,遇到了一些奇怪的问题,由于之前写的都比较顺利,从来没有调试过代码,直到现在才发现学习 Cocos Creator 这几个月以来竟然从来没有调试过代码,于是赶紧研究了一下,发现经常用到的大概就两种:VS Code + Chrome 和 Chrome,今天就来简单的记录一下,方便和我一样不会调试的小伙伴了解一下。

第一种:VS Code + Chrome

1.首先创建一个 Hello World 的项目,修改脚本如下:

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!'
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;

        // 按 F10 跨越调试,按 F11 步进调试
        
        console.log('debug_01');
        console.log('debug_02');
        console.log('debug_03');

        this.debugTest();

        console.log('debug_07');
        console.log('debug_08');
        console.log('debug_09');
    },

    // called every frame
    update: function (dt) {

    },

    debugTest() {
        console.log('debug_04');
        console.log('debug_05');
        console.log('debug_06');
    }
});

2.Cocos Creator 安装 VS Code 扩展插件:

3.VS Code 安装 Debugger for Chrome 扩展插件:

4.安装 Debugger for Chrome 扩展插件成功后,切换到 Debug 模式,设置 launch.json 类型 为 Chrome:

设置成功后可以看到生成了 launch.json 文件如下:

5.接下来再在 Cocos Creator 中添加 Chrome Debug 配置:

可以发现 launch.json 文件发生了变化:

image

6.接下来就可以在代码中添加断点,按 F5 进行调试了(按 F10 跨越调试,按 F11 步进调试):

第二种:Chrome

1.首先创建一个 Hello World 的项目,修改脚本如下(直接使用介绍第一种调试方法时的工程即可):

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!'
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;

        // 按 F10 跨越调试,按 F11 步进调试
        
        console.log('debug_01');
        console.log('debug_02');
        console.log('debug_03');

        this.debugTest();

        console.log('debug_07');
        console.log('debug_08');
        console.log('debug_09');
    },

    // called every frame
    update: function (dt) {

    },

    debugTest() {
        console.log('debug_04');
        console.log('debug_05');
        console.log('debug_06');
    }
});

2.使用 Chrome 预览游戏:

3.按 F12 打开 Chrome 开发者工具:

4.选择 Sources 然后 Ctrl + P 搜索打开 HelloWorld.js 文件:

5.接下来在代码中添加断点,按 F5 刷新浏览器进行调试(按 F10 跨越调试,按 F11 步进调试):

最后:

各位小伙伴们学会了没有?有任何想法或者建议都可以评论或者私聊给我哦!


推荐阅读:

一文教你实现「飞机大战」里战机的控制逻辑

自定义虚拟摇杆组件让你一劳永逸


我是「Super于」,立志做一个每天都有正反馈的人!

你可能感兴趣的:(Cocos Creator 如何进行断点调试?)