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于」，立志做一个每天都有正反馈的人！

​