Debugging di Safari's Web Inspector, saat menggunakan modul loader seperti SystemJS

Saya membuat Ionicaplikasi menggunakan es6 modules, TypeScriptdan SystemJSsebagai pemuat modul. Ini adalah pengaturan saya:

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>

contoh skrip (TypeScript):

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

export class ConfigLoader {
    ...
}

Semuanya berjalan dengan baik di Chrome. Namun, saat men-debug menggunakan Safari's Web Inspector, saya tidak dapat menempatkan breakpoint apa pun di skrip karena Web Inspector hanya menampilkan skrip yang dimuat langsung dari HTML (melalui tag skrip), dan bukan skrip yang dimuat oleh XHR (dalam kasus saya, oleh SystemJS) . Ini berarti saya tidak dapat men-debug skrip saya sendiri, yang tentu saja tidak dapat diterima.

Saya mencoba untuk mengatasi ini dengan menggunakan SystemJS seperti sebelumnya, tetapi juga menempatkan tag skrip di html, seperti:

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

Namun, ini tidak berhasil, karena SystemJS tampaknya tidak senang dengan ini:

Panggilan System.register tidak valid. Panggilan Anonymous System.register hanya dapat dilakukan oleh modul yang dimuat oleh SystemJS.import dan tidak melalui tag skrip.

Bagaimana cara menggunakan SystemJS dan pada saat yang sama memiliki kemampuan untuk melakukan debug di Safari? Saya mencari solusi yang sedikit lebih canggih daripada 'letakkan pernyataan debugger di setiap skrip' ...

Mungkin Anda dapat menggunakan IDE seperti WebStorm dengan Debugger yang kuat untuk Web dan Node.

Contoh:

Anda dapat melihat lebih lanjut tentang debugger WebStorm di sini .

Beberapa alternatif untuk WebStorm:

1. Atom (Gratis)
2. Intellij IDEA (komunitas: Gratis)
3. Kode Visual Studio (Gratis)
4. ...

PS: Saya mengembangkan aplikasi Ionic dan React dengan WebStorm: D

Pernahkah Anda mempertimbangkan untuk menggunakan debugger jarak jauh, seperti https://github.com/google/ios-webkit-debug-proxy .

Juga ada ghostlab, berikut ini artikel bagus tentang memulai https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

tulis ke dalam kata kunci file js debuggerdan buka inspect elementexplorer

ketika menyegarkan halaman dan mode debugging ...

bersenang senang lah ;-)