Depuração no Web Inspector do Safari, ao usar um carregador de módulo como SystemJS

Estou criando um Ionicaplicativo usando es6 modules, TypeScripte SystemJScomo um carregador de módulo. Esta é minha configuração:

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>

script de exemplo (TypeScript):

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

export class ConfigLoader {
    ...
}

Tudo funciona muito bem no Chrome. No entanto, ao depurar usando o Web Inspector do Safari, não posso colocar nenhum ponto de interrupção nos scripts porque o Web Inspector só mostra scripts que são carregados diretamente do HTML (por meio de tags de script), e não scripts carregados por XHR (no meu caso, por SystemJS) . Isso significa que não posso depurar meus próprios scripts, o que é obviamente inaceitável.

Tentei contornar isso usando SystemJS como antes, mas também colocando as tags de script no html, assim:

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

No entanto, isso não funciona, porque SystemJS não parece feliz com isso:

Chamada System.register inválida. As chamadas System.register anônimas só podem ser feitas por módulos carregados por SystemJS.import e não por meio de tags de script.

Como uso o SystemJS e, ao mesmo tempo, posso depurar no Safari? Estou procurando uma solução um pouco mais sofisticada do que 'colocar uma instrução do depurador em cada script' ...

Bem, talvez você possa usar algum IDE como o WebStorm com um depurador forte para Web e Node.

Exemplos:

Você pode ver mais sobre o depurador WebStorm aqui .

Algumas alternativas para WebStorm:

1. Atom (grátis)
2. Intellij IDEA (comunidade: grátis)
3. Código do Visual Studio (gratuito)
4. ...

PS: Eu desenvolvo aplicativos Ionic e React com WebStorm: D

Você já olhou para o uso de um depurador remoto, como https://github.com/google/ios-webkit-debug-proxy .

Também existe o ghostlab, aqui está um bom artigo sobre como começar https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

escrever na palavra debugger- chave do arquivo js e abrir inspect elementno explorer

ao atualizar a página e o modo de depuração ...

Aproveite ;-)