Debuggen im Web Inspector von Safari bei Verwendung eines Modulladeprogramms wie SystemJS

Ich erstelle eine IonicApp es6 modules, TypeScriptund SystemJSals Modul - Lader. Dies ist mein Setup:

tsconfig.json:

{
  "compilerOptions": {
    ...
    "target": "es5",
    "module": "system",
    ...
  }
}

index.html:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>

Beispielskript (TypeScript):

import {IConfig} from "./app-config";

export class ConfigLoader {
    ...
}

In Chrome läuft alles super. Beim Debuggen mit dem Web Inspector von Safari kann ich jedoch keine Haltepunkte in den Skripten platzieren, da im Web Inspector nur Skripte angezeigt werden, die direkt aus dem HTML-Code (über Skript-Tags) geladen werden, und keine Skripte, die von XHR (in meinem Fall von SystemJS) geladen wurden. . Dies bedeutet, dass ich meine eigenen Skripte nicht debuggen kann, was natürlich nicht akzeptabel ist.

Ich habe versucht, dies zu umgehen, indem ich SystemJS wie zuvor verwendet habe, aber auch die Skript-Tags im HTML-Code platziert habe, wie folgt:

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
 ... other app scripts
<script>System.import('js/app.js')</script>

Dies funktioniert jedoch nicht, da SystemJS darüber nicht glücklich zu sein scheint:

Ungültiger System.register-Aufruf. Anonyme System.register-Aufrufe können nur von Modulen ausgeführt werden, die von SystemJS.import geladen wurden, und nicht von Skript-Tags.

Wie verwende ich SystemJS und kann gleichzeitig in Safari debuggen? Ich suche nach einer Lösung, die etwas ausgefeilter ist als "in jedes Skript eine Debugger-Anweisung einfügen" ...

javascript safari ecmascript-6 systemjs web-inspector Fikkatra
quelle

Dies mag wie ein seltsamer Rat erscheinen, und da die Frage seit dem 11. Januar offen ist, würde ich Ihnen raten, vielleicht in das Webpack einzutauchen. Ich habe in SystemJS gelesen, aber ich habe nicht das Gefühl, dass es Ihre Bedürfnisse abdeckt.

DevNebulae

Sieht so aus, als hätten Sie kein Glück, wenn Sie das Skript nicht wie Sie in das HTML laden können. Wie Sie gesehen haben, scheint Chrome der einzige Browser zu sein, der dies unterstützt.

Der Muffin-Mann

Mögliches Duplikat von Wie man dynamisch geladenes JavaScript (mit jQuery) im Debugger des Browsers selbst debuggt?

Mikayla Maki

Verwenden Sie debuggerJS Schlüsselwort

Kamil Kiełczewski

@ KamilKiełczewski In der Frage heißt es ausdrücklich: "Ich suche nach einer Lösung, die etwas ausgefeilter ist als" in jedes Skript eine Debugger-Anweisung

einfügen

Debuggen im Web Inspector von Safari bei Verwendung eines Modulladeprogramms wie SystemJS

Antworten: