VS Code调试Cocos Creator项目配置方法

最新推荐文章于 2024-11-08 18:09:24 发布

原创最新推荐文章于 2024-11-08 18:09:24 发布 · 6.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Cocos Creator #VS Code #Visual Studio Code #Debugger for Chrome #Chrome

本文详细介绍如何在VSCode中使用DebuggerforChrome插件调试CocosCreator项目，包括配置Chrome调试环境、设置断点及运行调试流程。适用于游戏开发者优化CocosCreator项目代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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` 字段，将正确的端口添加上去。