Cocos Creator使用VS Code调试方法

最新推荐文章于 2025-11-28 16:57:54 发布
原创 最新推荐文章于 2025-11-28 16:57:54 发布 · 3.4w 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#调试 #插件 #vs-code #Cocos

本文介绍了如何在Cocos Creator中使用VS Code进行调试，包括安装插件、配置launch.json、处理调试问题以及对Cocos Creator调试体验的吐槽。重点强调了在不同平台上设置模拟器或真机调试的步骤，以及解决“Not a valid project”错误的方法。

最近公司项目用Cocos做H5，我也就突然有用Cocos来做一个ios的手游的想法，Unity用惯了，想拓展下。结果么，用的我吐槽一大堆。

首先就是Cocos的调试，太不方便了，看官方文档，也是讲的一点都不清楚，还是自己百度加摸索才解决。

（一）Cocos如果要使用模拟器或是本机调试，首先你要安装VS Code插件。
这里写图片描述
如图位置，点击后会将cocos的vs code指定插件安装到指定位置（当然忘了说，先安装VS Code）

要在VS Code中使用该插件调式的话，
这里写图片描述
先点击1的调试Tab，然后点击2的齿轮，或者点击下图齿轮旁的箭头，然后选添加配置
这里写图片描述
出现如图的配置选项，从中选取Cocos-

最低0.47元/天 解锁文章
CocosCreator V2.1.2 + VS Code 调试
标题
08-02 512
CocosCreator使用最新的 V2.1.2版本，安装过程中如果一直提示正在加载，请安装VS2017环境； 1.安装vscode，版本如下： 2.安装Chrome 3.在vscode中安装Debugger for Chrome插件 4.使用VScode打开创建的项目。一般是assets同级目录。打开后会生成一个.vscode文件夹。 5.在VScode中按下图操作 ...
CocosCreator3.8研究笔记（二）windows环境 VS Code 编辑器的配置
w风雨无阻w的专栏
08-31 4632
我们希望在 VS Code 中修改脚本代码后，不需要返回 Cocos Creator 就能触发脚本编译， 这时就需要添加编译任务。为了便于辅助开发，我们可以给 VS Code 配置工作流，添加编译任务 和 添加Chrome Debug。为了提高搜索效率以及文件列表中隐藏不需要显示的文件， VS Code 需要设置排除目录用于过滤。一般来说，使用外部编辑器修改项目脚本代码后，需要返回 Cocos Creator 才能触发脚本编译。调试过程中，可以在源码文件上直接下断点，进行监控。
CocosCreator VSCode调试时报Unable to find an installation of the browser on your system
Truman_Chan的博客
09-21 1160
根据配置VSCode调试环境。
VScode如何调试javascript文件
最新发布
11-28 490
打开项目的，在调试配置中添加字段，粘贴你的 Node 路径：runtimeExecutable写成node的路径，即可以直接调试怎么调试typescript文件，无需额外安装复杂插件，就能直接断点调试 TS 源码（而非编译后的 JS）。
Cocos creator 使用 Vscode 2017-附件资源
03-02
Cocos creator 使用 Vscode 2017-附件资源
vscode调试cocos creator
hackerlu的专栏
11-08 1308
2、然后打开cocos creator 顶部菜单，点击 developer，在下拉菜单中选择 visual studio code workflow，添加 add chrome debug setting，这个会在项目文件夹下添加一个。最近接触了小游戏开发，在众多的开发引擎中选择了开源的游戏引擎 cocos creator，学习的过程中免不了调试，所以把调试的环境搭建记录一下。2、打开工程后，添加空的node，修改为Main，然后在assets目录添加Scripts文件夹，再新建Main.ts脚本。
Cocos Creator使用VS Code调试代码配置
trayvontang的博客
01-27 5379
首先我们先打开cocos创建一个项目。
精选资源
cocos creator的枪神之神游戏源码 精品特价
01-28
- `jsconfig.json`：JavaScript配置文件，用于VS Code等编辑器进行JavaScript代码的智能提示和导航。 - `project.json`：Cocos Creator项目的核心配置文件，包含项目的基本信息、资源引用、依赖库和构建设置等。 ...
cocos creator 开发（二） vs code编辑器
省粮
04-04 1787
本文转载cocos creator 官方关于vscode配置文件的文章 其中还夹杂着一些本人的一些方案和意见 配置代码编辑环境 在快速上手教程中，我们介绍了在资源管理器中双击脚本文件打开代码编辑器快速编辑代码的方法。但编辑器内置的代码编辑器功能并不完善，只适合快速浏览和做少量编辑的需要。对程序员来说，我们需要更成熟完善的代码编辑环境。 Visual Studio Code Visua...
COCOS CREATOR调试问题：用vs code（1.3.1） 调试2.0.8 creator版模拟器调试时无法加载Cocos-JSB
晓伟的专栏
02-12 2105
作为一个编程人员，各类工具的安装，肯定都是轻车熟路的，我就不在这里赘述了，免得浪费时间。安装了cocos creator后，发下js文件不能直接编辑，不得不又安装了微软打个的vscode，但既然是研究，那么第一个要解决的问题，当然就是调试啦，我个人的习惯是跟着断点研究代码，不然一大堆看下去，估计头晕脑胀还没什么效果。 不得不说，creator还是比较不方便的，居然不能直接打断点调试，vscode...
Cocos Creator 使用VSCode进行调试，超简单，没有任何参数设置
u014661152的博客
12-10 3032
刚接触cocos creator才几天，项目上遇到问题总是console.log，怪麻烦的，网上找资料搜索vscode进行调试，总是失败，换一种方式进行调试 1、打开vscode调试界面： 2、cocos编辑器浏览器运行项目，然后点击VSCode 中调试界面的 Debug URL，输入浏览器运行项目的地址，我的是“http://localhost:7456/”，按下"Enter"，就能快速调试了，简单吧，没装任何插件，也没配置任何参数 ...
cocoscreator使用vscode调试
Continue__的博客
05-20 3067
步骤： 1、vscode 下载 Debugger for Chrome插件 2、进入creator 编辑器完成配置操作 开发者->VS code 工作流->添加 Chrome Debug 配置 3、完成前面两步基本上就可以了，可以看到如下图所示的launch.json配置信息： 如果出现以下错误： 可以添加一句： ...
VS Code调试Cocos Creator项目配置方法
IT_VETERAN的博客
06-29 6357
在Cocos Creator官网的文档中推荐使用 Visual Studio Code（以下简称 VS Code）作为代码的编辑工具。官方文档中也详细说明了Cocos Creator如何使用 VS Code 来配置代码编辑环境，但是如何在VS Code中进行项目的调试并没有详细的说明。大家可以按照以下步骤便可轻松实现使用VS Code断点调试Cocos Creator项目。 VS Code中安装...
<6>Cocos Creator​​​​​​​调试
jadeshu的博客
11-07 1431
   高手在于调试，下面来谈Cocos Creator调试! 1. 网页平台调试     调试常见的三种形式为调试打印、运行时报错与断点调试，这里主要利用编辑器"VS Code"与"Chrome浏览器"，与原生平台调试讲解。     Cocos Creator中所有的标准输出包括其提供的各种输出接口，如：cc.log、cc.info、cc.warn和cc.error等。本节以cc.log为例...
CocosCreator与VsCode跟Chrome之间做调试
sun_surprise的博客
04-18 1209
前面下载插件及配置我就不说啦。Creator文档上面已经做了很详细的讲解，我们今天讨论一下调试的问题。 1、配置好之后，在Code编辑中launch.json里面有歌地址，默认点是8080 2.如果我们没有修改那个端口号的话，就会得到一个空白页。 3.那么我们不知道当前的端口号是多少怎么办呢？很简单，我们切换到CocosCreator编辑器，把调试换成浏览器， 点击播放， 这个就是我...
用vsCode调试cocosCreator
weixin_30466421的博客
08-10 278
1.首先在vscode中最左侧的扩展里边，下载debugger fo chrom, 安装成功后会有一个launch.json,修改内容: 1 { 2 "version": "1.4.0", 3 "configurations": [ 4 { 5 "name": "Creator Debug: Launch Chrome", 6 "type": "chrome", ...
Cocos 使用VsCode调试-跨域问题
Shino_jie的博客
01-14 994
在添加完debug配置后在项目文件夹中打开vscode然后找到launch.json这个runtimeArgs参数在原本的配置中是没有的,给他添加上去。
【vscode】调试cocos creator (Js 无法命中断点问题解决)
瑾修的博客
04-03 4861
We couldn’t find a corresponding source location, but found some other files with the same name: You may need to adjust the webRoot in your launch.json if you’re building from a subfolder, or tweak your sourceMapPathOverrides.
调试Cocos Creator项目的两种方式
热门推荐
stillwater123的博客
02-01 1万+
ps：需要将默认浏览器设置为Chrome 一、VS Code+Chrome { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against loca
Cocos creator 在vs code beBug运行时，游戏可视区域 要怎么 匹配打开的窗口区域
11-14
<think> 我们被要求回答关于在VS Code中使用Cocos Creator进行Debug运行时，如何使游戏可视区域匹配打开的窗口区域的问题。 根据引用[1]，我们知道Cocos Creator从1.4.0-beta.2开始支持使用VS Code调试网页版游戏，需要安装Debugger for Chrome插件并配置。 但是，用户的问题是关于调整游戏可视区域以匹配打开的窗口区域。这通常涉及到游戏视图的尺寸设置。 在Cocos Creator中，游戏运行时的视图尺寸通常由项目设置中的设计分辨率和适配策略决定。但是，在调试运行时，我们可能希望改变窗口大小，并让游戏内容自适应。 在VS Code中调试时，我们通过Chrome（或基于Chromium的浏览器）运行游戏。因此，调整游戏窗口的大小并让内容自适应，实际上需要在Cocos Creator项目中进行设置，或者在浏览器调试时调整。 解决方案可能包括： 1. 在Cocos Creator项目中设置适配策略（例如，使用Fit Height、Fit Width等）。 2. 在Chrome调试时，利用Chrome的开发者工具模拟不同设备尺寸，或者调整窗口大小并让游戏内容自动缩放。 但是，用户希望的是在打开窗口时自动匹配，所以重点应该在Cocos Creator的项目设置上。 具体步骤： 1. 在Cocos Creator编辑器中，打开项目设置（Project -> Project Settings）。 2. 在“项目设置”面板中，选择“Canvas”选项（在旧版本中可能是“分组管理”旁边的“Canvas”设置）。 3. 在“设计分辨率”部分，设置你期望的设计分辨率（例如960x640）。 4. 在“适配策略”（Fit Height / Fit Width）中，根据需求选择。例如，如果希望高度填满，则选择Fit Height；宽度填满则选择Fit Width。通常，我们会选择Fit Height或Fit Width，并同时勾选“适配屏幕宽度”和“适配屏幕高度”的选项（具体版本可能不同，但原理相同）。 5. 这样设置后，无论在什么尺寸的窗口运行，游戏都会按照设置进行缩放适配。 然而，在调试运行时，我们可能还需要注意： - 在VS Code中配置的Chrome调试，默认打开的窗口大小可能是固定的。我们可以在VS Code的launch.json配置中指定窗口大小吗？ 实际上，Debugger for Chrome插件允许我们在launch.json中配置窗口大小。我们可以通过添加`"windowSize": [width, height]`来设置。但是，这个配置项在最新版本的Debugger for Chrome中可能已经被移除（或者不再支持）。目前更常用的方式是通过`runtimeArgs`来传递参数。 例如，在VS Code的launch.json中，我们可以这样配置： ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:7456", "webRoot": "${workspaceFolder}", "runtimeArgs": [ "--window-size=960,640" ] } ] } ``` 这样，Chrome会以960x640的窗口大小打开。 但是，请注意，Cocos Creator在调试时默认启动的端口是7456（如引用[4]中提到的热更新URL：http://localhost:7456/update-db），所以url设置为`http://localhost:7456`。 然而，仅仅设置窗口大小并不能保证游戏内容自适应，还需要项目设置中的Canvas适配策略。 因此，我们需要结合两者： - 在Cocos Creator中设置好Canvas的适配策略，确保游戏内容会根据Canvas尺寸变化而缩放。 - 在VS Code的调试配置中设置窗口大小（可选，如果不设置，则窗口默认大小，但游戏内容会根据窗口大小自动适配，因为Canvas已经设置了适配策略）。 总结步骤： 1. 在Cocos Creator中配置Canvas的适配策略，使其能够根据窗口尺寸自动缩放。 2. 在VS Code的launch.json中，通过runtimeArgs设置窗口大小（可选）。 但用户可能希望的是，无论窗口大小如何，都能自动适配。所以重点在第一步。 另外，引用[4]中提到，我们可以通过VS Code配置热更新，但这里我们关注的是窗口大小。 注意：在Cocos Creator 2.x及以后版本中，Canvas组件的适配策略设置位置可能在场景的Canvas组件上，也可能在项目设置中，具体取决于版本。在3.x中，每个场景的Canvas组件可以独立设置，但通常我们也会在项目设置中有一个全局的初始设置。 因此，我们给出如下步骤： 步骤一：在Cocos Creator编辑器中设置Canvas适配 1. 打开项目，在场景编辑器中，选中Canvas节点。 2. 在属性检查器中，找到Canvas组件（如果没有，请添加）。 3. 在Canvas组件的Design Resolution属性中，设置设计分辨率（如960x640）。 4. 在Fit Height和Fit Width之间选择，或者同时选择（取决于需求）。通常，选择Fit Height表示高度会适配屏幕高度，宽度按比例缩放；Fit Width同理。如果希望同时适配宽高，可以选择Expand（扩展）或Shrink（收缩）模式。 步骤二：在VS Code中配置调试窗口大小（可选） 1. 打开VS Code，进入调试视图（点击左侧的虫子图标）。 2. 点击齿轮图标（配置），打开launch.json。 3. 在configurations中找到你的Chrome调试配置（如果没有，需要先按照引用[1]添加配置）。 4. 添加`"runtimeArgs": ["--window-size=宽度,高度"]`，例如`"runtimeArgs": ["--window-size=960,640"]`。 这样，当调试运行时，Chrome窗口会以指定大小打开，并且Cocos Creator的游戏内容会根据Canvas组件的适配策略自动调整。 注意：如果用户希望窗口打开时最大化，可以设置`"runtimeArgs": ["--start-maximized"]`，但是注意，在调试时可能无法精确控制窗口大小，因为用户屏幕尺寸不同。所以，如果需要固定大小，就指定宽度和高度；如果希望自适应，那么只需在Cocos Creator中设置好适配策略即可，不需要指定窗口大小，让用户自行调整窗口，游戏内容会自动适配。 因此，核心在于Cocos Creator中的Canvas适配设置。 引用： [^1]：告诉我们如何配置VS Code调试。 [^4]：提到了Cocos Creator调试的URL和端口（localhost:7456）以及VS Code配置任务的方法，但这里我们关注调试配置。 因此，我们回答： 在VS Code中使用Cocos Creator进行Debug运行时，让游戏可视区域匹配打开窗口区域的方法如下： 1. **在Cocos Creator中设置Canvas适配策略**： 这是确保游戏内容自适应窗口的关键步骤。在场景中选中Canvas节点，然后在属性检查器中设置Canvas组件的适配策略（Fit Height、Fit Width等）。例如，如果你希望游戏高度始终填满窗口，则选择Fit Height；宽度同理。这样，无论窗口尺寸如何变化，游戏内容都会按比例缩放以适应窗口。 2. **（可选）在VS Code中配置调试窗口大小**： 在VS Code的`launch.json`配置文件中，为Chrome调试配置添加`runtimeArgs`参数来指定窗口大小。例如： ```json "runtimeArgs": [ "--window-size=960,640" ] ``` 这样，当启动调试时，Chrome会以960x640的窗口尺寸打开。 通过以上步骤，游戏可视区域将自动匹配打开的窗口区域。 注意：如果未在VS Code中设置窗口大小，默认窗口大小可能由系统决定。但无论窗口大小如何，只要在Cocos Creator中正确设置了Canvas适配策略，游戏内容都会自动适应窗口。 如果遇到问题，请检查Cocos Creator的Canvas组件设置，并确保在VS Code中正确配置了调试参数。 参考：[^1][^4] §§相关问题§§ 1. Cocos Creator中Canvas组件的适配策略有哪些？如何选择？ 2. 在VS Code中调试Cocos Creator游戏时，如何配置多设备调试？ 3. 除了窗口大小，Cocos Creator还有哪些常见的性能优化方向？（参考引用[3]） </think>在 VS Code 中使用 Cocos Creator 进行 Debug 运行时，让游戏可视区域匹配打开窗口区域的方法如下： ### 解决方案 1. **配置 Canvas 适配策略** 在 Cocos Creator 编辑器中： - 选中场景中的 `Canvas` 节点 - 在 **属性检查器** 中调整 `Design Resolution`（设计分辨率） - 设置适配策略： - `Fit Height`：高度自适应（适合竖屏游戏） - `Fit Width`：宽度自适应（适合横屏游戏） - `Expand`：扩展模式（保持比例填充窗口） ```js // 脚本动态调整示例 cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL); ``` 2. **修改 VS Code 调试配置** 在 `.vscode/launch.json` 中添加窗口尺寸参数： ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Cocos Debug", "url": "http://localhost:7456", "webRoot": "${workspaceFolder}", "runtimeArgs": [ "--window-size=960,640" // 设置窗口尺寸 ] } ] } ``` 3. **强制刷新游戏视图** 调试启动后，在 Chrome 开发者工具中执行： ```js // 强制重置视图 cc.view.setFrameSize(cc.winSize.width, cc.winSize.height); ``` ### 关键配置说明 | 配置项 | 推荐值 | 作用 | |--------|--------|------| | `Design Resolution` | 匹配游戏设计分辨率 | 基础渲染尺寸 | | `Fit Height/Width` | 根据游戏类型选择 | 自动缩放适配窗口 | | `--window-size` | 与设计分辨率一致 | 控制调试窗口尺寸 | ### 验证步骤 1. 在 Cocos Creator 中设置好 Canvas 适配策略 2. 在 VS Code 按 F5 启动调试 3. 打开 Chrome 开发者工具（Ctrl+Shift+I） 4. 在 Console 执行 `cc.winSize` 确认尺寸匹配 > 提示：若使用多分辨率适配，建议在 `game.resize` 事件中添加自适应逻辑[^3]： > ```js > cc.view.on('canvas-resize', () => { > updateCanvasScale(); > }); > ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值