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）。

3、配置VsCode环境

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

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

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

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

［3］VsCode配置设置

右边会出现几个选项，选择chrome，此时会生成一个launch.json文件，默认内容在此省略。

接下来是关键。

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

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

于是，上面的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浏览器窗口也不存在问题了）。然后在VSCODE里面脚本SortAnimation.ts中设置一个断点，并按下VSCODE菜单中的F5键以调试方式运行项目，这样启动界面就卡住进入断点了(修改了代码运行之前记得先编译)。

引用

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net