Cocos Creator 进行断点调试

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

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

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

5.接下来在代码中添加断点，按 F5 刷新浏览器进行调试（按 F10 跨越调试，按 F11 步进调试）：