Use VSCode to debug cocos2d-x JSB programs

@zhangxm, I’ve tried the new zip and I still get the same error message. This is on iPhone simulator.

I do get some messages in the debug console:

ar: attachRequest: address: 192.168.177.14 port: 5086
ar: attachRequest: connected

I could send you my test project and see if that works on your machine.

For other people that want to try this out:

Check the path of your cocos install with ‘which cocos’, normally when running setup.py and use source … afterwards the path is changed, but I had to use source bash_profile as well before the path changes took effect.

I finally got it working, in my environment the cocos path variables were defined in 2 places which caused some problems.

@zhangxm, it now works as expected, nice work and thanks for your assistance!

@araker Glad to here it. It is my pleasure. And please give some feedback if you found any issue. Thanks.

Hi!

Is VSCode right now ready to be used with 100% JavaScript projects created with Cocos Creator?

I’m using Cocos Creator 1.0 on Mac OS X and trying to setup VSCode to use it to debug my project, but for the moment I’m failing :cry:

Here is what is displayed in VSCode console:
ar: attachRequest: address: localhost port: 7456 ar: attachRequest: connected ar: _termiated: Not a valid project.
Thanks for your help.


Daniel

@cocosdan You should open the JSB project built by cocos creator.

Thanks for your fast answer.

This mean that I can’t use VSCode to debug ‘directly’ a Cocos Creator project I’m currently editing, I need to build it first?

Right now, when I hit the ‘play’ or ‘refresh’ button, in Cocos Creator, I can view the result of my last changes in the default browser (Firefox), and even debug it if I need to.

I wanted to do the same within VSCode, because it seems the debugger included with VSCode is better than the one of Firefox, but if I need to build the project first, then it is not as interresting as I thought.

Thanks anyway for your help.


Daniel

This debugger is used to debug JSB programs, not for h5 apps.

hello, i use it success, but the debug console can’t show any log of the jsb program, how can i config the configuration file?

Debugger uses Firefox remote debugging protocol to communication between client(VSCode) and server(JSB program). There is not a protocol for log information. I will try to implement it if possible.

thanks a lot~

Hi @zhangxm thanks, this looks very promising!

I’m trying out Cocos Creator vs other options at the moment and debug support is really important.

So far, I’ve been able to attach the VS Code JSB debugger to the game running on iOS simulator.

I can run the debugger from the Creator project root folder rather than the jsb build folder, by changing the cwd property in .vscode/launch.json e.g.

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Cocos-Debug",
			"type": "cocos",
			"request": "attach",
			"port": 5086,
			"address": "localhost",
			"cwd": "${workspaceRoot}/build/jsb-default"
		}
	]
}

But, when Creator generates the JSB project it minifies all source javascript into a single file project.dev.js (for debug build). There is an option to generate source maps, but can I configure VS Code to use these sourcemaps?

What I want to be able to do is set a breakpoint in the source javascript in assets/Script instead of in the minified project.dev.js

Any ideas, or maybe this is something that is being worked on?

@pandemosth if you opened the JSB project, you can set breakpoint in source javascript.

But the JSB project does not have the source javascript, only minified project.dev.js ?

There is an option not to use minified version in Creator.

Great, can you show where that is in Creator? Thanks

@pandamicro Could you show it to @pandemosth?
Thanks.

@zhangxm and @pandamicro Any follow up on this question guys? Thanks

@pandemosth Sorry about it. I asked @pandamicro to take a look.

@pandemosth currently project.dev.js cannot be tear down to separated files in JSB, because we use node.js require to manage dependencies in Creator project, so we need browserify to package project scripts into project.dev.js. Keeping files apart will cause issues in JSB.

So when native debug is needed, what I do most often is to modify directly in project.dev.js, then apply to original scripts when solution found

Ok, what about source maps then, as this would be the reason to generate them

@zhangxm any plans to support source maps in the VS Code debug extension?