Getting started with OpenFL and Haxe in VSCode: My first-time experience

Haxe
2

Part 2: Launch and debug

I should point out that I couldn’t find any obvious links to tutorials on the OpenFL website where it lists VSCode as a supported editor/IDE, nor was there anything in the README file for the VSCode Lime extension. In particular, there’s no mention of debugging, which is what I wanted to try next.

Luckily, I know how to debug web browser projects in VSCode already. I’ve used VSCode’s debugging extensions for browsers like Chrome and Firefox with both TypeScript and Royale. However, not everyone will have that pre-existing knowledge, so some kind of documentation would be really helpful.

Let’s see here. I already know how to build my project with Ctrl+Shift+B. Additionally, I noticed in the status bar that there’s an item that says “Release”. It seems intuitive that I should be able click it and change from “Release” to “Debug”. Yes, I see a pop-up with “Release”, “Debug”, and “Final”. I don’t know what “Final” is, and how it might differ from “Release”, but I’ll look into that later.

I see that building creates an HTML file in Export/html5/bin. I create a launch configuration for Chrome:

{
	"type": "chrome",
	"request": "launch",
	"name": "Launch Chrome",
	"file": "${workspaceFolder}/Export/html5/bin/index.html",
}

Then, I start my debug configuration.

I see the following output in VSCode’s Debug Console:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
DisplayingABitmap.js:20040
Access to image at 'file:///C:/Users/josht/Development/OpenFL/DisplayingABitmap/Export/html5/bin/assets/openfl.png?6984' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. [file:///C:/Users/josht/Development/OpenFL/DisplayingABitmap/Export/html5/bin/index.html]
Failed to load resource: net::ERR_FAILED [file:///C:/Users/josht/Development/OpenFL/DisplayingABitmap/Export/html5/bin/assets/openfl.png?6984]
js__$Boot_HaxeError
DisplayingABitmap.js:27369

I guess this means that I need a server. No big deal. A lot of web frameworks require that. I quickly launch one with Node.js:

npx http-server Export/html5/bin

Then, I create a new launch configuration:

{
	"type": "chrome",
	"request": "launch",
	"name": "Launch Chrome",
	"url": "http://localhost:8080",
	"webRoot": "${workspaceFolder}/Export/html5/bin"
}

To test, I added a trace() call in my code. I also create a MouseEvent.CLICK event listener on a Sprite and add a breakpoint inside the listener in my .hx file. When I launch in Chrome, I see my console output in VScode, and when I click the Sprite, VSCode’s debugger stops at the correct line and shows the local variables that I would expect. It’s great to see that source maps seem to “just work” without any configuration on my end.

My Feedback/Suggestions

As I mentioned above, there don’t seem to be any docs for debugging in the couple of places where I assumed that I would find some. I think that this will make it pretty hard for someone less experienced with VSCode to get started. It actually took me several minutes to realize what I needed to do too, to be honest. I had to switch contexts and ask myself, “how would I do this in TypeScript or Royale?”

By the way, I happened to find this thread that talks about using the Run Test Task command to run your project:

As a VSCode extension developer myself, I’m not sure that this command is being mapped to the correct action. As I understand it, Run Test Task is supposed to be for running unit tests or other types of automated testing.

4 Likes