VSCode + Haxe + Chrome Debugging

,
1

I’m trying to get debugging to work in VSCode + Chrome, but so far what I’ve tried has not worked.

I’m using the PiratePig demo and I’ve installed the Haxe Extension Pack (all default settings so far).

I have configured the following launch task:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start:dev",
      "problemMatcher": [],
      "label": "npm: start:dev",
      "detail": "webpack-dev-server --config webpack.dev.js"
    }
  ]
}

and I’ve adjusted the corresponding script in package.json to not have the --open option. I’ve also configured the following debug task:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Start browser debugging",
      "port": 9222,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/dist",
      "linux": {
        "runtimeExecutable": "/usr/bin/brave",
        "runtimeArgs": [
          "--remote-debugging-port=9222",
          "--user-data-dir=${workspaceFolder}/.vscode/brave"
        ]
      }
    }
  ]
}

The issue is that I can’t use breakpoints in Haxe files within VSCode as it tells me that the “Breakpoint is set but not yet bound”. Within Chrome/Brave, the source maps don’t seem to work correctly either.

I’ve also tried adding the -debug flag to build.hxml (though I’m unsure why -D source-map is set too), but that doesn’t seem to fix anything. I’ve also tried various combinations of adding:

      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${workspaceFolder}/*",
        "webpack:///./*": "${workspaceFolder}/*",
        "webpack:///src/*": "${workspaceFolder}/src/*",
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*"
      },

but also to no avail.

Can someone help with setting up debugging for this demo?

2

After having another couple of goes at this, I figured out how to get it working:

  1. Have to ensure that the -debug flag is added to build.hxml
  2. For launch.json (especially fixing/adding the sourceMapPathOverrides):
    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Start browser debugging",
      "port": 9222,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/*",
        "webpack:///file://*": "*"
      },
      "linux": {
        "runtimeExecutable": "/usr/bin/brave",
        "runtimeArgs": [
          "--remote-debugging-port=9222",
          "--user-data-dir=${workspaceFolder}/.vscode/brave"
        ]
      }
    }
  ]
}
3

Actually, with OpenFL all you need is the Lime extension with this launch config:

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Build + Debug",
			"type": "lime",
			"request": "launch"
		}
	]
}

Then select HTML5 / Debug in the status bar and simply start debugging.

3 Likes
4

That seems nice, but the extension says that:

Opening a folder that contains a project.xml , project.hxp or project.lime file activates this extension.

and the PiratePig demo does not have that. Is that normal?

5

Oh, the OpenFL samples you linked are for Haxe with NPM, meaning no Lime / build.hxml instead of project.xml. You need the Haxelib-based version:

1 Like