Cocos Creator基础｜TypeScript断点调试-摩杜云开发者社区

1、引言

本人建议：无论学习哪一门编程语言，在编码之初都应把断点调试技术一同进行下去。原因很简单：编程就是一个不断写作，不断纠正错误的过程。对于官方推荐的主要基于typescript的Cocos creator编程也是如此。

2、软件环境

开始之前，请确保您已安装了cocos　creator ，chrome浏览器和visual studio code 这三个软件！

本人环境：

MAC Catalina（10.15.7）
Cocos　Creator 3.6.0（2022.08）
Visual Studio Code　1.77.0（2023.3）
Google Chrome　111.0.5563.146

然后，启动Cocos　Creator，打开一个示例工程或者自建一个基本项目。

此处，还要创建一个简单的Typescript脚本文件，并把它关联到场景中的某个节点上（本例选择的是顶级节点Canvas，对应绑定的脚本组件是SortAnimation.ts）。

Cocos Creator基础｜TypeScript断点调试_chrome

3、配置VsCode环境

［1］VsCode安装插件（Debugger for chrome）

打开vsCode的［扩展］面板，如图所示，在搜索框中直接填入Debugger for chrome，然后点击安装。

Cocos Creator基础｜TypeScript断点调试_chrome_02

［2］设置Creator的脚本编辑器

在creator 里面双击js文件，则脚本会自动被VSCODE打开（需要先行设置：Cocos Creator->偏好设置）。将外部程序中的默认脚本编辑器设置成VSCODE，并把默认浏览器配置成Chrome浏览器。

Cocos Creator基础｜TypeScript断点调试_断点调试_03

［3］VsCode配置设置

右边会出现几个选项，选择chrome，此时会生成一个launch.json文件，可参考后面代码中注释掉的部分：

{
    "version": "0.2.0",
    "configurations": [
        // {
        //     "type": "chrome",
        //     "request": "launch",
        //     "name": "Launch Chrome against localhost",
        //     "url": "http://localhost:8080",
        //     "webRoot": "${workspaceFolder}"
        // },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Cocos Creator Launch Chrome against localhost",
            "url": "http://localhost:7456",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

接下来是关键！

4、进入creator 编辑器完成配置操作

进入creator 编辑器完成配置操作。点击Creator中的命令：开发者->VS code 工作流->添加 Chrome Debug 配置。

Cocos Creator基础｜TypeScript断点调试_Chrome_04

于是，上面的launch.json文件内容会被修改为下面的样子：

{
    "version": "0.2.0",
    "configurations": [
        // {
        //     "type": "chrome",
        //     "request": "launch",
        //     "name": "Launch Chrome against localhost",
        //     "url": "http://localhost:8080",
        //     "webRoot": "${workspaceFolder}"
        // },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Cocos Creator Launch Chrome against localhost",
            "url": "http://localhost:7456",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

5、效果展示

到这里我们已经配置完成了！此时保持creator编辑器打开，关闭所有Chrome浏览器实例（我在MAC上调试时发现这个细节；否则，无法进入断点调试状态！至少首次时是这样，以后的调试过程中，开着已有的Chrome浏览器窗口也不存在问题了）。

首次调试时，如果开着一个谷歌浏览器，可能会出现如下小窗提示：

Cocos Creator基础｜TypeScript断点调试_Chrome_05

解决方法是：关闭所有谷歌浏览器，再重新调试即可。

另外，如果随后出现另一个小窗提示（内容大致是问是否继续会话之类的），点击“Debug Anyway”即可。

Cocos Creator基础｜TypeScript断点调试_Chrome_06

然后，在VSCODE里面脚本SortAnimation.ts中设置一个断点，并按下VSCODE菜单中的F5键以调试方式运行项目，这样启动界面就卡住进入断点了(修改了代码运行之前记得先编译)。

Cocos Creator基础｜TypeScript断点调试_断点调试_07

6、小结

在MAC下配置Cocos Creator针对Typescript的断点调试会有个别细节与Windows下不同，请注意这一点。

这里有一点麻烦的是，每当想调试一个新的Typescript组件（脚本）中的代码时都需要上面重复步骤的操作！这一点也值得注意。时间久也便习惯了。

引用

https://blog.csdn.net/lxt610/article/details/91128045