Firefox zeigt keine Typoskript (.ts) Quellkarten im Debugger

Question

Ich kann nur die .js Dateien sehen, die .ts Quellen erscheinen nicht in Firefox.

Es funktioniert in Chrome, ich kann Zeilenumbrüche in .ts-Dateien sehen und platzieren, und der Debugger funktioniert gut. Aber Firefox wird nicht funktionieren, keine Version, nicht die stabile oder die nächtliche oder die Entwicklerversion.

Könnte es sein, dass die Funktionalität auf Mac/OSX nicht implementiert ist? Wenn dem so ist, sollte es im Internet etwas darüber geben, aber ich habe nichts gefunden. Anscheinend wurde das Problem nirgends dokumentiert.

Hat jemand davon Kenntnis und vielleicht, wie man es repariert?

Answer 1

Ein wenig spät, aber hoffentlich hilfreich.

Für Firefox stellen Sie sicher, dass Sie "Ursprüngliche Quelle anzeigen" in den Debugger-Einstellungen aktiviert haben.

Als nächstes Ihre zusammengestellt Javascript muss einen absoluten Pfad Bezug auf Ihre .map-Datei haben, sollte der Pfad Referenz am Ende der kompilierten js-Datei angezeigt werden und wird wie folgt aussehen:

// # sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

Es ist wahrscheinlich, dass Sie eine sourceMappingURL haben, aber als relativer Pfad angegeben. FF scheint relative Pfade für Quellkarten nicht zu mögen.

Natürlich ist dies in Ihrem kompilierten js so jedes Mal, wenn Sie ts zu js kompilieren müssen Sie die sourceMappingURL zurücksetzen. Das wird sehr schnell langweilig.

Wenn Sie Gulp (oder wahrscheinlich andere Task-Runner) verwenden, können Sie eine Präfix-Option (sourceMappingURLPrefix) für die Zuordnungs-URL in Ihrer gulp.task festlegen, die Ihr Typoskript kompiliert. (siehe https://github.com/floridoo/gulp-sourcemaps)

Meine kompilierte .js befindet sich in \ dist mit Unterordnern. Leider hilft die Präfix-Option nicht mit Unterordnern. Glücklicherweise kann Gulp das auch behandeln, indem eine Funktion für das sourceMappingURLPrefix angegeben wird.

Die Funktion wird an ein Objekt übergeben, das einen Pfad zu der entsprechenden js hat, also können Sie mit ein wenig Stringmanipulation auch den Pfad zur .map-Datei erstellen (meine sind zusammen im selben Ordner).

Meine schluck build Aufgabe sieht wie folgt aus (siehe sourceMappingURLPrefix):

gulp.task('build-system', function() { 
    if(!typescriptCompiler) { 
     typescriptCompiler = typescript.createProject('tsconfig.json', { 
     "typescript": require('typescript') 
     }); 
} 
return gulp.src(paths.dtsSrc.concat(paths.source)) 
    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) 
    .pipe(changed(paths.output, {extension: '.ts'})) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(typescript(typescriptCompiler)) 
    .pipe(sourcemaps.write('.', { 
     includeContent: false, 
     sourceRoot: '/src', 
     sourceMappingURLPrefix: function (file) { 
      var mapPath = file.path.split(/[\\\/]/); //split path into component parts 
      return 'http://localhost:9000/dist/' + mapPath.slice(1, mapPath.length - 1).join('/') //prepend my local webserver and dist folder then re-join discarding the last slice which is the compiled .js file name. 
     } 
    })) 
    .pipe(gulp.dest(paths.output)); 
}); 

Dies erzeugt nun einen absoluten Pfad für die sourceMappingURL in meinem zusammengestellt js, die auch Unterordner korrekt referenziert, wie folgt aus:/# sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

Firefox lädt die .ts-Dateien und der Debugger funktioniert wie erwartet. Es funktioniert auch in Chrome.

Ich bin kein Gulp-Experte, also wenn es einen besseren Weg gibt, bin ich scharf darauf, es herauszufinden.

update: Ich habe vor kurzem auf die Verwendung von Aurelia-CLI umgeschaltet, die ich bisher viel einfacher finde als Gulp + jspm. Beide Firefox & Chrome korrekt abholen die .ts-Dateien ohne jegliche Konfiguration erforderlich.