We’d love to hear from you. Whether you have a question that you’d like us to answer as part of our FAQ,  you’ve identified something that just doesn’t quite look right in one of our tutorials, you have a business opportunity or for any other reason, please use this simple form to contact us.

We’ll do our best to provide a prompt response.

Like what you see?...pass it on!

Debugging in Cocos Creator

Introduction

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:

Extensions Sidebar - Cocos Creator - Devga.me Tutorial

Now back in Cocos Creator select Developer->VS Code Workflow->Add Chrome Debug Settings.

Developer > VS Code Workflow - Cocos Creator - Devga.me Tutorial

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.

Visual Studio Debugger - Devga.me Tutorial

Now you can run your project by selecting Debug->Start Debugging or by pressing F5.

Start debugging - Cocos Creator - Devga.me Tutorial

Once your code is running you can control program execution using this toolbar:

Toolbar - Cocos Creator - Devga.me Tutorial

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.

 

Cocos Scripting<<PreviousTable of ContentsNext>>Handling Input

Like what you see?...pass it on!

script ends --->