SystemJS gibi bir modül yükleyici kullanırken Safari'nin Web Denetçisinde hata ayıklama

Bir Oluşturduğum Ionickullanarak uygulamayı es6 modules, TypeScriptve SystemJSbir modül yükleyici olarak. Bu benim kurulumum:

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>

örnek komut dosyası (TypeScript):

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

export class ConfigLoader {
    ...
}

Chrome'da her şey harika çalışıyor. Ancak, Safari'nin Web Inspector'ı kullanarak hata ayıklarken, komut dosyalarına herhangi bir kesme noktası yerleştiremiyorum çünkü Web Inspector yalnızca doğrudan HTML'den (komut dosyası etiketleri aracılığıyla) yüklenen komut dosyalarını gösterir ve XHR tarafından yüklenen komut dosyalarını göstermez (benim durumumda SystemJS tarafından) . Bu, elbette kabul edilemez olan kendi komut dosyalarımda hata ayıklayamayacağım anlamına geliyor.

Daha önce olduğu gibi SystemJS kullanarak bu sorunu çözmeyi denedim, ancak aynı zamanda komut dosyası etiketlerini html'ye yerleştirerek, şöyle:

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

Ancak, SystemJS bundan memnun görünmediğinden bu işe yaramaz:

Geçersiz System.register çağrısı. Anonim System.register çağrıları yalnızca SystemJS.import tarafından yüklenen modüller tarafından yapılabilir, komut dosyası etiketleri aracılığıyla yapılamaz.

SystemJS'yi nasıl kullanırım ve aynı zamanda Safari'de hata ayıklama yeteneğine sahip olurum? 'Her betiğe bir hata ayıklayıcı ifadesi koy'dan biraz daha karmaşık bir çözüm arıyorum ...

Eh, belki Web ve Düğüm için güçlü bir Hata Ayıklayıcı ile WebStorm gibi bir IDE kullanabilirsiniz .

Örnekler:

WebStorm hata ayıklayıcı hakkında daha fazla bilgiyi burada bulabilirsiniz .

WebStorm için bazı alternatifler:

1. Atom (Ücretsiz)
2. Intellij IDEA (topluluk: Ücretsiz)
3. Visual Studio Code (Ücretsiz)
4. ...

Not: WebStorm: D ile Ionic ve React uygulamaları geliştiriyorum

Aşağıdaki gibi, bir uzaktan hata ayıklama kullanarak içine baktınız mı https://github.com/google/ios-webkit-debug-proxy .

Ayrıca ghostlab var, işte başlamakla ilgili güzel bir makale https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

js dosyası anahtar sözcüğü içine yazma debuggerve açık inspect elementkaşif içine

sayfa yenilendiğinde ve hata ayıklama modu ...

tadını çıkar ;-)