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

121

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

Fikkatra
la source
4
Cela peut sembler un conseil étrange, et puisque la question est ouverte depuis le 11 janvier, mais je vous conseillerais peut-être de vous plonger dans le webpack. J'ai lu SystemJS, mais je n'ai pas le sentiment qu'il couvrira vos besoins.
DevNebulae
On dirait que si vous ne pouvez pas charger le script dans le html comme vous le faisiez, vous n'avez pas de chance. Chrome semble être le seul navigateur à prendre en charge cela, comme vous l'avez vu.
The Muffin Man
3
utiliser le debuggermot
Kamil Kiełczewski
1
@ KamilKiełczewski La question déclare explicitement "Je recherche une solution un peu plus sophistiquée que" mettre une instruction de débogage dans chaque script "..."
fikkatra

Réponses:

1

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

Exemples:

entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici

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

Olaf
la source
1
J'ai essayé d'entrer dans Webstorm, mais j'ai tellement de fonctionnalités utiles fournies par le système d'extension dans VS Code que Webstorm n'a pas, il est difficile de faire le saut.
Stephen M Irving le
-4

é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 ;-)

Hamed Najafi
la source
3
La question déclare explicitement "Je recherche une solution un peu plus sophistiquée que 'mettre une instruction de débogage dans chaque script' ..."
fikkatra