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

122

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" ...

— 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

Vielleicht können Sie eine IDE wie WebStorm mit einem starken Debugger für Web und Node verwenden.

Beispiele:

Weitere Informationen zum WebStorm-Debugger finden Sie hier .

Einige Alternativen für WebStorm:

Atom (frei)
Intellij IDEA (Community: Kostenlos)
Visual Studio Code (kostenlos)
...

PS: Ich entwickle Ionic- und React-Apps mit WebStorm: D.

— Olaf
quelle

Ich habe versucht, in Webstorm einzusteigen, aber das Erweiterungssystem in VS Code bietet so viele nützliche Funktionen, die Webstorm nicht bietet. Es ist schwierig, den Sprung zu schaffen.

— Stephen M Irving

Haben Sie sich mit der Verwendung eines Remote-Debuggers wie https://github.com/google/ios-webkit-debug-proxy befasst? .

Es gibt auch Ghostlab. Hier ist ein schöner Artikel über die ersten Schritte: https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

— rexfordkelly
quelle

-4

Schreiben Sie in das Schlüsselwort js file debuggerund öffnen Sie esinspect element im Explorer

beim Aktualisieren der Seite und im Debugging-Modus ...

geniesse es ;-)

— Hamed Najafi
quelle

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

— einfügen