Отладка в Safari Web Inspector при использовании загрузчика модулей, например 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 я не могу размещать какие-либо точки останова в сценариях, потому что 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. Атом (бесплатно)
2. Intellij IDEA (сообщество: бесплатно)
3. Код Visual Studio (бесплатно)
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в проводнике

при обновлении страницы и режиме отладки ...

наслаждайся этим ;-)