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

javascript safari ecmascript-6 systemjs web-inspector fikkatra.dll
sumber

Ini mungkin tampak seperti saran yang aneh, dan karena pertanyaan tersebut telah dibuka sejak 11 Januari, tetapi saya akan menyarankan Anda untuk mungkin menyelami webpack. Saya telah membaca SystemJS, tetapi saya tidak merasa itu akan mencakup kebutuhan Anda.

DevNebulae

Sepertinya jika Anda tidak bisa memuat skrip di html seperti yang Anda lakukan, Anda kurang beruntung. Chrome tampaknya menjadi satu-satunya browser yang mendukung ini seperti yang Anda lihat.

The Muffin Man

Kemungkinan duplikat Bagaimana men-debug JavaScript yang dimuat secara dinamis (dengan jQuery) di debugger browser itu sendiri?

Mikayla Maki

gunakan debuggerkata kunci JS

Kamil Kiełczewski

@ KamilKiełczewski Pertanyaannya secara eksplisit menyatakan 'Saya mencari solusi yang sedikit lebih canggih daripada' letakkan pernyataan debugger di setiap skrip '...'

fikkatra

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

Jawaban: