0
点赞
收藏
分享

微信扫一扫

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断点调试_chrome_03

[3]VsCode配置设置

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

接下来是关键。

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

Cocos Creator基础|TypeScript断点调试_断点调试_05



引用

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

举报

相关推荐

0 条评论