最近在寫遊戲的時候，遇到了一些奇怪的問題，由於之前寫的都比較順利，從來沒有調試過代碼，直到現在才發現學習 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於」，立志做一個每天都有正反饋的人！
