Налагодження у веб-інспекторі Safari при використанні завантажувача модулів типу SystemJS

Я створюю Ionicдодаток , використовуючи es6 modules, TypeScriptі в SystemJSякості модуля завантажувача. Це моя установка:

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>

приклад сценарію (TypeScript):

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

export class ConfigLoader {
    ...
}

У Chrome все працює чудово. Однак при налагодженні за допомогою веб-інспектора Safari я не можу розміщувати жодних точок перериву у скриптах, оскільки Web Inspector показує лише скрипти, завантажені безпосередньо з HTML (через теги скриптів), а не скрипти, завантажені XHR (у моєму випадку SystemJS) . Це означає, що я не можу налагоджувати власні сценарії, що, звичайно, неприпустимо.

Я намагався обійти це, використовуючи SystemJS, як і раніше, але також розміщуючи теги скриптів у html, наприклад:

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

Однак це не працює, оскільки SystemJS не здається цим задоволеним:

Недійсний виклик System.register. Анонімні виклики System.register можуть здійснюватися лише модулями, завантаженими SystemJS.import, а не через теги скриптів.

Як я можу використовувати SystemJS і одночасно мати можливість налагодження в Safari? Я шукаю рішення дещо складніше, ніж "ставити заяву про налагодження у кожен сценарій" ...

Ну, можливо, ви можете використовувати деякі IDE на зразок WebStorm із потужним налагоджувачем для Web та Node.

Приклади:

Більше про налагоджувач WebStorm ви можете подивитися тут .

Деякі варіанти для WebStorm:

1. Atom (безкоштовно)
2. Intellij IDEA (співтовариство: безкоштовно)
3. Код візуальної студії (безкоштовно)
4. ...

PS: Я розробляю програми Ionic та React за допомогою WebStorm: D

Чи задумалися ви використовувати віддалений налагоджувач, наприклад https://github.com/google/ios-webkit-debug-proxy .

Також є ghostlab, ось приємна стаття про початок роботи https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

запишіть у ключове слово js-файл debuggerта відкрийте inspect elementв провідник

при оновленні сторінки та режимі налагодження ...

насолоджуйся цим ;-)