最近接触了小游戏开发，在众多的开发引擎中选择了开源的游戏引擎 cocos creator，学习的过程中免不了调试，所以把调试的环境搭建记录一下

所需要的工具：

1. cocos creator
2. Chrome（谷歌浏览器）
3. VS Code

这些工具的安装就不说了，下一步，下一步，and 下一步即可

一、创建cocos creator demo工程

        1、创建空工程

        2、打开工程后，添加空的node，修改为Main，然后在assets目录添加Scripts文件夹，再新建Main.ts脚本

        3、在start函数里写入经典的 Hello World

至此，Hello World 工程准备完毕

二、vs code 添加调试插件

1、安装JavaScript Debugger插件

• 扩展内搜索 JavaScript Debugger 然后认准微软的，安装即可

2、然后打开cocos creator 顶部菜单，点击 developer，在下拉菜单中选择 visual studio code workflow，添加 add chrome debug setting，这个会在项目文件夹下添加一个 

• .vscode/launch.json
•  文件作为项目的调试配置：

• 3、保持cocos creator编辑器打开状态，然后打开vs code，点击左侧栏的 debug 按钮，在调试面板中选择 

• Cocos Creator Launch Chrome against localhost

• 在main.ts hello world 代码中添加断点，然后按 F5 启动调试，这样就看见chrome启动了游戏。过一会后就断点了。

调试的时候依赖 Cocos Creator 编辑器内置的 Web 服务器，所以需要在编辑器启动状态下才能进行调试。如果编辑器预览游戏时使用的端口不是默认端口，则需要手动修改 launch.json 里的 url 字段，将正确的端口添加上去。

调试过程中可以在源码文件上直接下断点，进行监控，是比使用 Chrome 内置的 DevTools 调试更方便和友好的工作流程。