CocosCreator学习二-调试

在creator的使用中不可避免的需要使用调试功能，在项目开发的最后需要发布。这里总结一下调试与发布的操作。
准备工作:首先，需要安装cocoscreator软件和vscode以及官方推荐的chrome浏览器。
以官方的游戏摘星星为例。

第一步，安装CocosCreator API适配插件

打开摘星星的项目，然后选择主菜单中的“开发者”->"vscode工作流"->“VSCode扩展插件”。这样可以把cocos creator api适配插件安装到VSCode全局的插件文件夹中，一般在用户工程文件夹的.vscode/extensions目录下。这个点一下就好了，如果API插件有更新，则需要再次更新。

11.png

安装成功后在控制台会显示绿色的提示：”VS Code extension installed to...“。这个插件的功能是：vscode在编辑状态是，注入符合CocosCreator组建脚本使用习惯的语法提示。

extension.png

第二步生成智能提示

在creator上点击”开发者”->"vscode工作流"->“更新VSCode智能提示数据“
点击完会把根据引擎的API生成的”creator.d.ts“和”jsconfig.json“数据文件复制到项目根目录下，操作台会显示绿色提示”API data generated and copied ...“。

api.png

creator.png

对于每个新建的项目都需要运行这个命令，而且和上面的API插件一样，如果creator的版本更新了，也要打开所需要的项目重新运行该命令，来同步引擎的API数据。

第三步我们使用VS Code的”打开文件夹功能“，可以直接打开项目的文件夹。

ps:必须打开的是creator的assets目录的上一级目录，保证VS Code打开的文件中”。vscode”文件夹是被打开文件夹的一级子目录，并且唯一.否则，VS Code无法正常工作,一般工程的目录如下

image.png

第四步使用VS Code进行脚本编译。

首先打开Creator,然后

image.png

点击完会出现

image.png

然后在VSCode中会发现项目中多了一个tasks.json的任务配置文件。

在VS Code中按下Cmd/Ctrl+p激活”快速打开“刷入框，然后输入”task compile“

image.png

如果配置正确，下方输出会出现 ”监视任务已完成“。
Ps：这个成功只代表编译请求发送成功，Creator开始编译了。但是根据机器不同、项目不同，编译内容不容，编译的速度有快有慢，有的时候可能需要等待一会。
这些都做完了之后下面就是重头戏了，需要安装一个插件，直接在vscode中的扩展搜索Chrome，然后安装.

image.png

然后点击调试，点击调试之前还需要配置launch.json的文件，需要制定Chrome的路径，这里就不说了。

image.png

过一会他会打开一个Chrome,然后就是工程运行的样子，我这里是摘星星。

image.png

然后返回vscode，发现他多了一串东西

image.png

这个就是断点调试的工具：
这几个从左到右代表的意思是：
继续
单步跳过
单步调试
单步跳出
重启

停止调试
点击我们想调试的那一行代码就可以看到一个红色的圆点，再次点击圆点就会消失。当运行就如断点的时候我们就可以进行调试了

image.png

在vscode的左侧也能看见一些堆栈信息。
从上到下依次为：变量查看区域，自定义监视区域，断点信息，调用堆栈。

image.png

变量查看区域：可查看或修改目前运行的有效变量名称与变量值，直接双击变量值即可对齐进行修改。
自定义监视区域:自定义添加、修改或删除指定名称的变量，如果自定义变量在当前上下文无效则会显示值为”undefined”。
断点信息：配置VS Code对断点或异常的处理，可通过在代码中鼠标点击添加断点，也可以进行修改或删除断点。
调用堆栈：当前运行状态调用堆栈，第一行为目前运行位置，往下依次为调用关系，以及可以通过单击跳转至堆栈所在的源码位置。
以上，就是VS Code的调试方式。
当然也有其他的调试方式，下面说下Chrome方式。
我们进入刚刚运行打开的Chrome，点击更多工具->开发者工具

image.png

在这里也可以查看到代码，进行断点调试，这里点击暂停，对应的vscode也会停住，调试方法基本大同小异。
当然Creator也可以成为我们调试的一个额外的方式，当我们改完代码，可以直接保存，然后再creator中运行，

image.png

如果代码有错误，只要保存了，creator就会同步的有变化，比如我故意写错，

image.png

然后可以看到creator的下方控制台有对应的报错信息，而且很精确，可以说是十分智能.
掌握这些工具方法，可以帮助我们更快的定位问题，排除错误，使我们的开发事半功倍。