SystemJSのようなモジュールローダーを使用する場合のSafariのWebインスペクターでのデバッグ

私が作成しています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インスペクターを使用してデバッグする場合、Webインスペクターは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でデバッグすることができますか？「各スクリプトにデバッガーステートメントを置く」よりも少し洗練された解決策を探しています...

まあ、多分あなたはWebとノードのための強力なデバッガでWebStormのようないくつかのIDEを使用することができます。

例：

WebStormデバッガの詳細については、こちらをご覧ください。

WebStormのいくつかの代替：

1. Atom（無料）
2. Intellij IDEA（コミュニティ：無料）
3. Visual Studio Code（無料）
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

ページを更新してデバッグモードにすると...

楽しめ ;-）