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

121

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

fikkatra
źródło
4
Może się to wydawać dziwną radą, a ponieważ pytanie jest otwarte od 11 stycznia, ale radziłbym ci zagłębić się w pakiet internetowy. Czytałem o SystemJS, ale nie mam wrażenia, że ​​zaspokoi Twoje potrzeby.
DevNebulae
Wygląda na to, że jeśli nie możesz załadować skryptu w formacie HTML, tak jak robiłeś, nie masz szczęścia. Wygląda na to, że Chrome jest jedyną przeglądarką, która to obsługuje, jak widzieliście.
The Muffin Man
3
użyj debuggersłowa kluczowego JS
Kamil Kiełczewski
1
@ KamilKiełczewski Pytanie jednoznacznie brzmi: „Szukam rozwiązania trochę bardziej wyrafinowanego niż„ umieść instrukcję debuggera w każdym skrypcie ”...”
fikkatra

Odpowiedzi:

1

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

Przykłady:

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

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

Olaf
źródło
1
Próbowałem dostać się do Webstorm, ale mam tak wiele przydatnych funkcji oferowanych przez system rozszerzeń w VS Code, których nie ma Webstorm, ciężko jest wykonać skok.
Stephen M Irving
-4

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

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

baw się dobrze ;-)

Hamed Najafi
źródło
3
Pytanie wyraźnie stwierdza: „Szukam rozwiązania nieco bardziej wyrafinowanego niż„ umieść instrukcję debuggera w każdym skrypcie ”...”
fikkatra