如何将 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

另外，如果我右击开发者window并选择添加源地图...，我输入的URL不会下载（我通过在记录每个网络请求的端口上实现一个示例 servlet 来检查它。

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

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

Answer 1

我认为它应该照常工作。

据我所知，目前没有通过 API.

指定源映射的方法

但是 //#sourceMappingUrl= 评论有效（请注意您的评论缺少 Url 部分）。

下面是示例打字稿文件的示例：

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文件，在main目录下运行 tsc不带参数：

tsc

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

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

在 main 目录中运行 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中打开devtoolsurl。它应该打开js文件和通过sourceMapping获得的typescript文件。并且断点和单步执行适用于打字稿文件。

您甚至可以通过绑定传递 Java 对象，并在控制台和调试器的 'Local' 选项卡中检查它们：

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

How to add sourcemaps to GraalVM JS inspection?

javascript

google-chrome

chromium

graalvm