COMMUNITY

VSCode + Haxe + Chrome Debugging

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?

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"
            ]
          }
        }
      ]
    }
    

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.

2 Likes

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?

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