Debugowanie w przeglądarce Safari w przeglądarce internetowej podczas korzystania z modułu ładującego, takiego jak SystemJS

Jestem tworzenia Ionicaplikacji z wykorzystaniem es6 modules, TypeScripta SystemJSjako ładowarka modułu. To jest moja konfiguracja:

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>

przykładowy skrypt (TypeScript):

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

export class ConfigLoader {
    ...
}

W Chrome wszystko działa świetnie. Jednak podczas debugowania za pomocą Safari Web Inspector nie mogę umieścić żadnych punktów przerwania w skryptach, ponieważ Web Inspector pokazuje tylko skrypty ładowane bezpośrednio z HTML (przez tagi skryptów), a nie skrypty ładowane przez XHR (w moim przypadku przez SystemJS) . Oznacza to, że nie mogę debugować własnych skryptów, co jest oczywiście niedopuszczalne.

Próbowałem to obejść, używając SystemJS, jak wcześniej, ale także umieszczając tagi skryptu w html, na przykład:

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

Jednak to nie działa, ponieważ SystemJS nie wydaje się być z tego zadowolony:

Nieprawidłowe wywołanie System.register. Anonimowe wywołania System.register mogą być wykonywane tylko przez moduły ładowane przez SystemJS.import, a nie przez znaczniki skryptu.

Jak korzystać z SystemJS i jednocześnie mieć możliwość debugowania w Safari? Szukam rozwiązania nieco bardziej wyrafinowanego niż `` umieść instrukcję debuggera w każdym skrypcie '' ...

Cóż, może możesz użyć jakiegoś IDE, takiego jak WebStorm z silnym Debuggerem dla sieci Web i Node.

Przykłady:

Możesz zobaczyć więcej o debugerze WebStorm tutaj .

Niektóre alternatywy dla WebStorm:

1. Atom (bezpłatny)
2. Intellij IDEA (społeczność: bezpłatna)
3. Visual Studio Code (bezpłatny)
4. ...

PS: Tworzę aplikacje Ionic i React w WebStorm: D

Czy zastanawiałeś się nad użyciem zdalnego debugera, takiego jak https://github.com/google/ios-webkit-debug-proxy .

Jest też ghostlab, tutaj jest fajny artykuł o rozpoczęciu https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

zapisz w pliku js słowo kluczowe debuggeri otwórz inspect elementw eksploratorze

podczas odświeżania strony i trybu debugowania ...

baw się dobrze ;-)