javascript - 如何将 sourcemaps 添加到 GraalVM JS 检查中？

Question

以下代码在 GraalVM Javascript 引擎上执行 javascript 代码片段:

 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();
}

如何将源映射附加到这个缩小的 javascript？

我试图将以下内容添加到缩小的 javascript 的末尾，但端口 8080 甚至没有被 ping 通:

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

此外，如果我右键单击开发人员窗口并选择添加源映射...，我输入的 URL 不会被下载(我通过在记录该端口的示例 servlet 上实现来检查它每个网络请求)。

请注意，我以脚本在 JVM 上运行的方式打开调试器，并通过在 chrome 中输入一个 URL 连接到它，如下所示:

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

Answer 1

我认为它应该照常工作。

据我所知，目前还没有通过 API 指定源映射的方法。

但是 //#sourceMappingUrl= 注释有效(请注意您的注释缺少 Url 部分)。

这是示例 typescript 文件的示例:

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");

和 tsconfig.json:

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

和java文件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<Integer> ret42 = () -> 42;
  }  
}

编译ts文件，在ma​​in目录运行tsc不带参数:

tsc

打开 out/logpoints.js 并将 sourceMappingUrl 更改为指向 http 而不是 ts 编译器生成的本地 fs 上的相对路径:

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

在 ma​​in 目录中运行 python 服务器:

> python -m SimpleHTTPServer 8000

Serving HTTP on 0.0.0.0 port 8000 ...

运行java文件:

$ 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

在 Chrome 中打开 devtools url。它应该打开js文件和通过sourceMapping获得的typescript文件。断点和单步执行适用于 typescript 文件。

您甚至可以通过绑定(bind)传递 Java 对象，并在控制台和调试器的“本地”选项卡中检查它们: