Developers Manual > Cocos Code IDE > Debug With Code IDE > How to Debug Cocos2d-JS Game Using Code IDE

How to Debug Cocos2d-JS Game Using Code IDE


Supportive Debugging Environment

On Windows you can debug Windows and Android game, and on Mac you can debug Mac, iOS and Android game.

This manual makes use of Mac as development environment, and here we will show you how to use Code IDE. The process on Windows is essentially the same.

Prerequisite


Please refer to Cocos Code IDE if you have not completed the installation of Cocos Code IDE.

IDE Configuration


Basic Settings

In Preferences/Cocos/JavaScript page, select the directory of Cocos2d-JS 3.x you had downloaded to be Javascript Framework.

Since v1.2.0 In Preferences/Cocos/Frameworks page, select Enging Mode and set the directory of Cocos2d-JS 3.x you had downloaded to be Javascript Framework.

Additional settings

You should provide compiling tools in Android if you need to replace the Android runtime we provided. Open Preferences / Cocos page.

Debug the Game


  1. Create a new Cocos2d-JS project and name it CocosJSGame
  2. Click Debug button on toolbar
  3. The script will be running on Runtime of Mac version we provided by default. If you want to debug program on other target platforms we provided, please refer to How To Debug on Other Target Platforms.

How to Debug


Breakpoints Supporting

You are able to create breakpoints in JavaScript script files.

  • When the close button is clicked, the breakpoint will be triggered.
  • When the breakpoint is triggered, select "Yes" to open Debug Perspective, and you will find many useful debug views, Call stacks, Variables, Breakpoints, etc.
  • Step over, Step into, Step out are also supported

Code Hot Updating

Do you want to change the position of close button?
The closeItem.attr function, is controlling the close menu's position.

1
2
3
4
5
6
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

Change "size.width-20" to ""size.width/2" on "x" and save your change, then you will find that you have changed where the close button is without restarting the app! It is now at the middle of the bottom!

How to Debug on Other Target Platforms


  • Open “Debug Configurations”page by clicking Debug Configurations button on toolbars
  • On the left side of the page, select the configuration named CocosJSGame we created just now.

Debug on iOS Simulator

  • Check iOS Simulator radio button
  • Choose a runtime app
  • Then click the Debug button
  • IDE will auto-install chosen runtime app and start runtime to debug

Debug on iOS Device

  • Firstly, you need a runtime IPA, from Cocos2d-JS 3.0 rc2 version offers PrebuiltRuntimeJs.ipa, from 1.0.0-rc1 version, you can build a custom runtime IPA by Cocos Code IDE too.
  • Install runtime IPA to your iOS device by iTunes and start runtime manually.
  • On "Debug Configuration" page, Check Remote Debug radio button
  • Select "iOS"" platform
  • Enter IP address of your device into the Target IP(Make sure that the Target IP is accessible)
  • Then click the Debug button

Debug on Android Device by ADB Mode

  • Check Android ADB Mode radio button
  • Choose a runtime apk
  • Click the Debug button
  • IDE will auto-install chosen runtime apk and start runtime to debug

Debug on Android Device by WLAN

  • Manually install runtime apk to your device. It is placed in CocosJSGame/runtime/android.
  • Start the runtime on device manually
  • On "Debug Configuration" page, Check Remote Debug radio button
  • Select "Android"" platform
  • Enter IP address of your device into the Target IP(Make sure that the Target IP is accessible)
  • Click the Debug button

Enjoy!

js_debug_button.png (17.8 kB) honghui.zhang@chukong-inc.com, 2014-07-18 10:50

js_breakpoint.png (178.2 kB) honghui.zhang@chukong-inc.com, 2014-07-18 10:50

js_config_button.png (14.3 kB) honghui.zhang@chukong-inc.com, 2014-07-18 10:51

js_remote_ios_debug.png (22.4 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

js_remote_mac_debug.png (21.9 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

js_android_debug_config_adb.png (24.1 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

js_cocos_preferences.png (51.8 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

js_ios_sim_debug_config.png (22.6 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

js_remote_android_debug.png (23.7 kB) honghui.zhang@chukong-inc.com, 2014-08-12 10:35

lua_cocos_preferences_above_1.2.0.jpg (148.1 kB) yuxinwork@163.com, 2015-02-28 08:42

js_cocos_preferences_above_1.2.0.jpg (151.5 kB) yuxinwork@163.com, 2015-02-28 08:43

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.