Cocos Creator使用VS Code调试方法

时间:2024-03-20 12:47:11

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

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

(一)Cocos如果要使用模拟器或是本机调试,首先你要安装VS Code插件。
Cocos Creator使用VS Code调试方法
如图位置,点击后会将cocos的vs code指定插件安装到指定位置(当然忘了说,先安装VS Code)

要在VS Code中使用该插件调式的话,
Cocos Creator使用VS Code调试方法
先点击1的调试Tab,然后点击2的齿轮,或者点击下图齿轮旁的箭头,然后选添加配置
Cocos Creator使用VS Code调试方法
出现如图的配置选项,从中选取Cocos-JSB
Cocos Creator使用VS Code调试方法
就能添加Cocos-Debug配置了(我图里没有是因为已经添加了)

这个时候会遇到有可能安装了插件,但确没有显示Cocos-JSB,这个问题网上也问的很多,此时请删除你项目工程中的launch.json,然后重新尝试就可以看到Cocos-JSB了

(二)接下来是配置launch.json
Cocos Creator使用VS Code调试方法
如果是模拟器调试,请确保address写成图中的样子,如果是真机,则填真机IP,模拟器调试时,如果不写成这个样子,基本你看控制台输出就是VS Code连接不上JSB

(三)调试代码时,首先你一定要保证模拟器或是真机其程序已经运行了,然后才能切换到Debug Tab来启动调试。如果上面两步都最对,我估计这个时候最大的问题是报Not a valid project。这个我也是弄了半天,才理解Cocos的文档什么意思

首先在编辑器工具栏正上方选择使用 模拟器(调试) 作为预览平台,然后点击编辑器中的 运行预览 按钮在模拟器中运行游戏。
然后找到模拟器中的项目资源路径,这个路径会在 Cocos Creator 安装路径中,根据操作系统的不同,路径有一些区别:
Windows:CocosCreator/resources/cocos2d-x/simulator/win32
Mac:CocosCreator.app/Contents/Resources/cocos2d-x/simulator/mac/Simulator.app/Contents/Resources
在 Mac 平台由于 VS Code 无法通过浏览选择应用程序包(.app)之内的路径,可能需要先打开 VS Code,关闭所有已开启的文件夹,然后将 Finder 里的上述路径拖拽到 VS Code 中。
然后就可以在打开的工程中的 src/project.dev.js 文件中设置断点并进行调试了。先设置好断点,然后确保模拟器已经在运行的情况下,VS Code 中切换到 Debug 页面,在下拉菜单选中 Cocos-Debug,然后点击绿色三角按钮开启调试进程。

这是原文,什么意思呢?首先你要调试代码的话,不是打开你项目所在工程的文件夹(比如D:\Project),而是打开上面提到的两个路径的文件夹,windows就是那个为win32文件夹,mac是哪个resources,然后,你所有的代码都被整合到这个文件夹下的src/project.dev.js文件中,你在这个文件里下断点调试(真实混乱,我要是几百个源文件被整到一个文件里统一调试,想想就头痛)。

所以如果光打开这个js文件,或是vscode里打开的不是这个路径下的整个文件夹,就会报Not a valid project

(四)最后吐槽下,这东西怎么调试?不光把各个源文件整到一个文件中,而且我们调试时,必须在源工程,和这个构建工程中来回切换,这不是一丁点的烦。后悔自己为什么突然想用cocos开发,还是unity好啊!

PS:
追加槽点,无论是原生平台调试,还是网页调试,在启动时的断点都是无法命中的,这还调试个屁,这种引擎也好意思拿出来让人做开发,基本功能都不全。