Débogage dans l'inspecteur Web de Safari, lors de l'utilisation d'un chargeur de module tel que SystemJS

Je crée une Ionicapplication à l' aide es6 modules, TypeScriptet SystemJScomme chargeur de module. Voici ma configuration:

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>

exemple de script (TypeScript):

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

export class ConfigLoader {
    ...
}

Tout fonctionne très bien dans Chrome. Cependant, lors du débogage à l'aide de l'inspecteur Web de Safari, je ne peux placer aucun point d'arrêt dans les scripts car l'inspecteur Web n'affiche que les scripts chargés directement à partir du HTML (via des balises de script), et non les scripts chargés par XHR (dans mon cas, par SystemJS) . Cela signifie que je ne peux pas déboguer mes propres scripts, ce qui est bien sûr inacceptable.

J'ai essayé de contourner ce problème en utilisant SystemJS comme avant, mais en plaçant également les balises de script dans le html, comme ceci:

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

Cependant, cela ne fonctionne pas, car SystemJS ne semble pas satisfait de cela:

Appel System.register non valide. Les appels System.register anonymes ne peuvent être effectués que par des modules chargés par SystemJS.import et non via des balises de script.

Comment utiliser SystemJS tout en ayant la possibilité de déboguer dans Safari? Je recherche une solution un peu plus sophistiquée que 'mettre une instruction de débogage dans chaque script' ...

Eh bien, vous pouvez peut-être utiliser un IDE comme WebStorm avec un débogueur puissant pour Web et Node.

Exemples:

Vous pouvez en savoir plus sur le débogueur WebStorm ici .

Quelques alternatives pour WebStorm:

1. Atom (gratuit)
2. Intellij IDEA (communauté: gratuit)
3. Visual Studio Code (gratuit)
4. ...

PS: je développe des applications Ionic et React avec WebStorm: D

Avez-vous envisagé d'utiliser un débogueur distant, tel que https://github.com/google/ios-webkit-debug-proxy .

Il y a aussi ghostlab, voici un bel article sur la mise en route https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

écrire dans le mot debugger- clé du fichier js et ouvrir inspect elementdans l'explorateur

lors de l'actualisation de la page et du mode de débogage ...

Profitez-en ;-)