Debugging is essential in both learning to use a game engine and in trying to sort out your inevitable mistakes. Without a debugger I am constantly struggling, so it’s fortunate there is decent debugging support in Cocos Creator/Visual Studio Code. In this tutorial we will look at how to set up the debugger and the basics of using it.
Setting Up a Debugger
There are a few hoops we have to jump through to get started debugging when using Cocos Creator. The first thing we want to do is enable Chrome debugging in Visual Studio Code. This of course assumes that you have the Chrome browser installed on your computer. If you don’t be sure to download and install it from here.
Next in Visual Studio Code, we need to install the Visual Studio Code extension for Chrome debugging. In Visual Studio code, select the Extensions sidebar:
Now back in Cocos Creator select Developer->VS Code Workflow->Add Chrome Debug Settings.
This will configure Visual Studio Code with a Chrome debug target. Now back in Visual Studio Code, we can set a breakpoint in our code by clicking the sideline of the line of code you want the debugger to stop on.
Now you can run your project by selecting Debug->Start Debugging or by pressing F5.
Once your code is running you can control program execution using this toolbar:
I’m not going to get in depth into the debugging process in this tutorial, but thankfully I have already done an in-depth debugging tutorial available here. Cocos Creator also supports remote debugging (ie, debugging a game running on your Android phone from your PC) using JSB, but that is well beyond the scope of this tutorial. For more, very in-depth, details read this.