Блог

Следующий код выполняет фрагмент кода javascript на движке GraalVM 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 даже не был пропингован:

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

Кроме того, если я щелкну правой кнопкой мыши в окне разработчика и выберу Добавить исходную карту…, введенный мной URL-адрес не будет загружен (я проверил это, реализовав пример сервлета на этом порту, который регистрирует каждый сетевой запрос).

Пожалуйста, обратите внимание, что я открываю отладчик так, как сценарий запускается в JVM, и подключаюсь к нему, введя URL-адрес в chrome следующим образом:

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

Я думаю, что это должно работать как обычно.

Насколько я знаю, в настоящее время нет способа указать исходные карты через 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, в главном директории запустите tsc без аргументов:

 tsc
 

Откройте out/logpoints.js и измените sourceMappingURL, чтобы он указывал на http вместо относительного пути в локальной сети, созданного компилятором ts:

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

В главном директоре запустите сервер 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
 

Откройте devtools URL-адрес в Chrome. Он должен открыть файл js и файл машинописного текста, полученные с помощью сопоставления источников. А точки останова и пошаговое выполнение работают над файлом машинописного текста.

Вы даже можете передавать объекты Java через привязки и проверять их как в консоли, так и на вкладке «Локальный» в отладчике: