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 文件发生了变化：

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 预览游戏：