在Cocos Creator官网的文档中推荐使用 Visual Studio Code(以下简称 VS Code)作为代码的编辑工具。官方文档中也详细说明了Cocos Creator如何使用 VS Code 来配置代码编辑环境,但是如何在VS Code中进行项目的调试并没有详细的说明。大家可以按照以下步骤便可轻松实现使用VS Code断点调试Cocos Creator项目。
VS Code中安装Debugger for Chrome插件
Debugger for Chrome插件是在Google Chrome浏览器中调试JavaScript代码的VS Code功能扩展的插件。在VS Code插件管理中搜索Debugger for Chrome插件进行安装。如下图所示:
添加 Chrome Debug 配置
VS Code 工作流->添加 Chrome Debug 配置`,这个菜单命令会在你的项目文件夹下添加一个 `.vscode/launch.json` 文件作为调试器的配置文件。
VS Code打开项目查看调试配置文件。之后便可以在 VS Code 里点击左侧栏的 `调试` 按钮打开调试面板,并在最上方的调试配置中选择 `Creator Debug: Launch Chrome`,然后点击绿色的开始按钮开始调试。 调试的时候依赖 Cocos Creator 编辑器内置的 Web 服务器,所以需要在编辑器启动状态下才能进行调试。如果编辑器预览游戏时使用的端口不是默认端口,则需要手动修改 `launch.json` 里的 `url` 字段,将正确的端口添加上去。
断点并运行Debug
想了解更多Cocos内容,可点击以下课程学习
Cocos Creator第一季:让游戏开发更简单
Cocos Creator第二季:真实的物理世界