Debug in Web Inspector di Safari, quando si utilizza un caricatore di moduli come SystemJS

Sto creando un Ionicapplicazione utilizzando es6 modules, TypeScripte SystemJScome un caricatore modulo. Questa è la mia configurazione:

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>

script di esempio (TypeScript):

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

export class ConfigLoader {
    ...
}

Tutto funziona alla grande in Chrome. Tuttavia, durante il debug utilizzando il Web Inspector di Safari, non posso inserire alcun punto di interruzione negli script perché Web Inspector mostra solo gli script caricati direttamente dall'HTML (tramite i tag di script) e non gli script caricati da XHR (nel mio caso, da SystemJS) . Ciò significa che non posso eseguire il debug dei miei script, il che è ovviamente inaccettabile.

Ho provato a aggirare questo problema usando SystemJS come prima, ma anche inserendo i tag script nell'html, in questo modo:

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

Tuttavia, questo non funziona, poiché SystemJS non sembra felice di questo:

Chiamata System.register non valida. Le chiamate anonime System.register possono essere effettuate solo da moduli caricati da SystemJS.import e non tramite tag di script.

Come uso SystemJS e allo stesso tempo ho la possibilità di eseguire il debug in Safari? Sto cercando una soluzione un po 'più sofisticata di "inserire un'istruzione debugger in ogni script" ...

Bene, forse puoi usare alcuni IDE come WebStorm con un potente debugger per Web e Node.

Esempi:

Puoi vedere di più sul debugger di WebStorm qui .

Alcune alternative per WebStorm:

1. Atom (gratuito)
2. Intellij IDEA (community: gratuita)
3. Visual Studio Code (gratuito)
4. ...

PS: sviluppo app Ionic e React con WebStorm: D

Hai provato a utilizzare un debugger remoto, come https://github.com/google/ios-webkit-debug-proxy .

Inoltre c'è ghostlab, ecco un bell'articolo su come iniziare https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

scrivi nella parola chiave del file js debuggere apri inspect elementin explorer

quando si aggiorna la pagina e la modalità di debug ...

divertirsi ;-)