Отладка в Safari Web Inspector при использовании загрузчика модулей, например SystemJS

121

Я создаю 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? Я ищу решение немного более сложное, чем «добавить оператор отладчика в каждый сценарий» ...

фиккатра
источник
4
Это может показаться странным советом, поскольку вопрос открыт с 11 января, но я бы посоветовал вам, возможно, погрузиться в webpack. Я читал о SystemJS, но не думаю, что он удовлетворит ваши потребности.
DevNebulae
Похоже, если вы не можете загрузить скрипт в html, как вы это делаете, вам не повезло. Как вы видели, Chrome, похоже, единственный браузер, который поддерживает это.
The Muffin Man
3
используйте debuggerключевое слово JS
Камил Келчевски
1
@ KamilKiełczewski В вопросе прямо говорится: «Я ищу решение немного более сложное, чем« поместить оператор отладчика в каждый скрипт »...»
фиккатра

Ответы:

1

Что ж, может быть, вы можете использовать какую-нибудь IDE, например WebStorm, с мощным отладчиком для Web и Node.

Примеры:

введите описание изображения здесь введите описание изображения здесь введите описание изображения здесь

Вы можете узнать больше об отладчике WebStorm здесь .

Некоторые альтернативы WebStorm:

  1. Атом (бесплатно)
  2. Intellij IDEA (сообщество: бесплатно)
  3. Код Visual Studio (бесплатно)
  4. ...

PS: Я разрабатываю приложения Ionic и React с помощью WebStorm: D

Олаф
источник
1
Я пытался войти в Webstorm, но у меня есть так много полезных функций, которые предоставляет система расширений в VS Code, которых нет в Webstorm, и это сложно сделать.
Стивен М. Ирвинг,
-4

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

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

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

Хамед Наджафи
источник
3
В вопросе прямо говорится: «Я ищу решение немного более сложное, чем« добавить оператор отладчика в каждый сценарий »...»
фиккатра