How to add sourcemaps to GraalVM JS inspection?

Question

The following code executes a javascript code snippet on GraalVM Javascript engine:

 try (Context context = Context.newBuilder("js").option("inspect", "4444").build()) {
        Value hello = context.eval(Source.newBuilder("js", "some minified javascript", "sample.js").build());

      // E.g.: Sleep a bit so I can open the debugger in chrome and start debugging
} catch (IOException e) {
  e.printStackTrace();
}

How can I attach a sourcemap to this minified javascript?

I tried to add the following to the end of the minified javascript, but port 8080 was not even pinged:

//# sourceMappingUrl=http://localhost:8080/sample.map

Also, if I right click on the developer window and choose Add source map..., the URL I enter is not downloaded (I checked it by implementing a sample servlet on that port that logs every network request).

Please note that I am opening the debugger in the way that the script runs on the JVM and I connect to it by enter a URL in chrome like this:

devtools://devtools/bundled/js_app.html?ws=127.0.0.1:4444/xxxxxxxxxxxxxx

user_1087978 · Answer

I think it's supposed to work as usual.

As far as I know there's no current way to specify the source maps through an API.

However the //#sourceMappingUrl= comment works (note your comment lacks the Url part).

Here's an example on a sample typescript file:

declare var myClass: any;

interface Pointlike {
  x: number;
  y: number;
}
interface Named {
  name: string;
}
 
function logPoint(point: Pointlike) {
  console.log("x = " + point.x + ", y = " + point.y);
}
 
function logName(x: Named) {
  console.log("Hello, " + x.name);
}
 
const obj = {
  x: 0,
  y: 0,
  name: "Origin",
};
 
logPoint(obj);
logName(obj);

console.log("0: " + myClass.id);
console.log("1: " + myClass.text);
console.log("2: " + myClass.arr[1]);
console.log("3: " + myClass.ret42());

console.log("Done");

and the tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "out",
        "sourceMap": true,
        "rootDir": "."
    },
    "exclude": [
        "node_modules",
        "resources"
    ]
}

and the java file Main.java:

import org.graalvm.polyglot.*;
import java.io.*;
import java.util.concurrent.*;

public class Main { 
  public static void main(String[] args) throws Exception { 
      File file = new File("out/logpoints.js");

      String language = Source.findLanguage(file);
      Source source = Source.newBuilder(language, file)
                            .build();
      try (Context context = Context.newBuilder("js")
             .allowAllAccess(true)
             .option("inspect", "4444")
             .build()) {
        context.getBindings("js")
               .putMember("myClass", new MyClass());
        Value hello = context.eval(source);
    } 
  }
  
  public static class MyClass {
      public int               id    = 42;
      public String            text  = "42";
      public int[]             arr   = new int[]{1, 42, 3};
      public Callable ret42 = () -> 42;
  }  
}

Compile the ts file, in the main dir run the tsc with no arguments:

tsc

Open out/logpoints.js and change the sourceMappingUrl to point to http instead of the relative path on the local fs as generated by the ts compiler:

//# sourceMappingURL=http://localhost:8000/out/logpoints.js.map

In the main dir run the python server:

> python -m SimpleHTTPServer 8000

Serving HTTP on 0.0.0.0 port 8000 ...

Run the java file:

$ javac Main 
java Main
Debugger listening on ws://127.0.0.1:4444/Nh_8EndzB0jCaOfA1giEpld5C1ilx5OeyWbmA3zFDEc
For help, see: https://www.graalvm.org/docs/tools/chrome-debugger
E.g. in Chrome open: devtools://devtools/bundled/js_app.html?ws=127.0.0.1:4444/Nh_8EndzB0jCaOfA1giEpld5C1ilx5OeyWbmA3zFDEc

Open the devtools url in Chrome. It should open the js file and the typescript file obtained through the sourceMapping. And the breakpoints and stepping through works on the typescript file.

You can even pass Java objects through the bindings and inspect them both in console and in the 'Local' tab in the debugger:

How to add sourcemaps to GraalVM JS inspection?

1 Answers