Cannot debug by using get-started/debug.html#debug

[omg1492]

I'd like to start with ES4X, so I tried to debug Hello World example following steps on https://reactiverse.io/es4x/get-started/debug.html#debug. It looks like doc is outdated and does not help user to start debugging.

My environment:

C:\workspace\sandbox\es4x-hellow>es4x versions
VM:        OpenJDK 64-Bit Server VM - 11.0.13
VM Vendor: GraalVM CE 21.3.0
Vert.x:    4.2.2
ES4X:      0.16.2
graaljs:   21.3.0

Scaffolding Hello World app:

c:\workspace\sandbox\es4x-hellow>npm install -g @es4x/[email protected]

changed 1 package, and audited 3 packages in 3s

found 0 vulnerabilities

c:\workspace\sandbox\es4x-hellow>npm init @es4x project
Missing bin\es4x-launcher.jar
npm ERR! code 3
npm ERR! path c:\workspace\sandbox\es4x-hellow
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c es4x "project"

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\myuser\AppData\Local\npm-cache\_logs\2022-01-02T20_57_32_201Z-debug.log

c:\workspace\sandbox\es4x-hellow>npm install

> [email protected] postinstall
> es4x install

added 3 packages, and audited 4 packages in 7s

found 0 vulnerabilities

c:\workspace\sandbox\es4x-hellow>npm start

> [email protected] start
> es4x

Server started on port 3000
Succeeded in deploying verticle

Test from another cmd window:

C:\workspace\sandbox\es4x-hellow>curl .:3000 
Hello ES4X!

Steps to reproduce:

1. Chrome Inspector
   • There is no info in terminal how to open Chrome inspector debugger agent as mentioned in chrome-inspector.

c:\workspace\sandbox\es4x-hellow>npm start -- -Dinspect

> [email protected] start
> es4x "-Dinspect"

Server started on port 3000
Succeeded in deploying verticle

2. Debug from VSCode
   • Generate launch configuration for vscode
   • Breakpoints in index.js are unbound, while it is possible to step through es4x-cli.js:

c:\workspace\sandbox\es4x-hellow>es4x vscode
c:\workspace\sandbox\es4x-hellow>type .vscode\launch.json
{
  "version": "0.2.0",
  "configurations": [{
    "name": "Launch es4x-hellow",
    "type": "node",
    "request": "launch",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
      "start",
      "--",
      "-Dinspect=9229"
    ],
    "port": 9229,
    "outputCapture": "std",
    "serverReadyAction": {
      "pattern": "started on port ([0-9]+)",
      "uriFormat": "http://localhost:%s",
      "action": "openExternally"
    }
  }]
}

Might relate to #432

[pmlopes]

@omg1492 thanks for the thorough report. I'm rebuilding a Windows 11 VM to test this scenario. I'll be honest, most of the development and testing is happening on Linux, so I have slacked a bit there.

Likewise, I'll keep you posted as I'll go over the issue.

[pmlopes]

@omg1492 it seems that there's a behavior change in graal debugger. The inspect will always require a port, plus breaking at start now seems to be true by default which makes the properties used by es4x to misbehave.

I'll tag this issue as a bug and continue debugging. We will need to update the docs to be explicit.

[pmlopes]

The latest release 0.16.3 fixed the start of the debugger however there's a regression on Graal that doesn't show any sources so breakpoints don't work at the moment. I'm fixing this and reporting upstream

[pmlopes]

For reasons, the supported way to debug is using chrome-debugger. This means that the docs should be updated to avoid the old ways.

[omg1492]

I understood that:

• to start debugging the following command with a port has to be used followed by opening chrome debugger URL. Why there are 2 URLs in the output?

> npm start -- "-Dinspect=9229"
...
> es4x "-Dinspect=9229"

Debugger listening on ws://127.0.0.1:9229/1lYV1xLfKwru5q2p5GkYXka0qcpQ5MPPGjeGCxDmxdU
For help, see: https://www.graalvm.org/tools/chrome-debugger
E.g. in Chrome open: devtools://devtools/bundled/js_app.html?ws=127.0.0.1:9229/1lYV1xLfKwru5q2p5GkYXka0qcpQ5MPPGjeGCxDmxdU
Debugger listening on ws://127.0.0.1:9229/Ml8-a239vruocIQX1HOvfibUk0di-18xDVcNHg7nScs
For help, see: https://www.graalvm.org/tools/chrome-debugger
E.g. in Chrome open: devtools://devtools/bundled/js_app.html?ws=127.0.0.1:9229/Ml8-a239vruocIQX1HOvfibUk0di-18xDVcNHg7nScs
Server started on port 3000
Succeeded in deploying verticle

• Debug from VSCode is obsolete, old way, and will be removed from doc.

OK?

[pmlopes]

I've been looking at this. It seems that the builtin debugger doesn't fully work anymore with the vscode default debugger.

I've updated the docs. There are 2 way of debugging:

1. Use chrome debugger directly (you can see the instructions on the terminal when the application starts)
2. You can still use vscode, but you must install the graalvm extension for vscode and it adds a new debugger config "graalvm" which works.

I've updated the vscode command to generate this config now. Here's the config:

{
  "version" : "0.2.0",
  "configurations" : [ {
    "name" : "Launch empty-project",
    "type" : "graalvm",
    "request" : "attach",
    "port" : 9229
  } ]
}