最近在写游戏的时候，遇到了一些奇怪的问题，由于之前写的都比较顺利，从来没有调试过代码，直到现在才发现学习 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 预览游戏：
3.按 F12 打开 Chrome 开发者工具：
4.选择 Sources 然后 Ctrl + P 搜索打开 HelloWorld.js 文件：
5.接下来在代码中添加断点，按 F5 刷新浏览器进行调试（按 F10 跨越调试，按 F11 步进调试）：
最后：
各位小伙伴们学会了没有？有任何想法或者建议都可以评论或者私聊给我哦！
推荐阅读：
我是「Super于」，立志做一个每天都有正反馈的人！
