Firefoxはデバッガでtypescript（.ts）ソースマップを表示していません

Question

.jsファイルのみが表示され、.tsソースはFirefoxに表示されません。これは、Chromeで動作します

、私が見ることができると場所ラインは.TSファイルに分割して、デバッガが素晴らしい作品。しかし、Firefoxは動作しません。バージョンはなく、安定版や夜間版、開発者版ではありません。

Mac/OSXで機能が実装されていない可能性がありますか？もしそうなら、それについてインターネット上に何かがあるはずですが、私は何も見つけませんでした。明らかに、この問題はどこにも書かれていません。

誰にもこれに関する知識がありますか、それを修正する方法はありますか？

Answer 1

少し遅れますが、うまくいけば役立ちます。

Firefoxの場合、デバッガの設定で[元のソースを表示]がオンになっていることを確認してください。

次に、あなたのコンパイルしたJavaScriptがあなたの.MAPファイルへの絶対パス参照を持っている必要があり、パス参照は、あなたのjsコンパイルされたファイルの末尾に表示されますと、次のようになります。

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

あなたがsourceMappingURLを持っていますが、相対パスとして指定している可能性があります。 FFはソースマップの相対パスが気に入らないようです。

もちろん、これはコンパイル済みのjsであるので毎回あなたがsourceMappingURLをリセットする必要がありますJSするTSをcomplile。これは非常に素早く面倒になります。

Gulp（またはおそらく他のタスクランナー）を使用している場合は、gulp.task内のマッピングスクリプトにtypescriptをコンパイルするためのプレフィックスオプション（sourceMappingURLPrefix）を設定できます。

私のコンパイルの.jsは、サブフォルダとの\ distの中に存在する（https://github.com/floridoo/gulp-sourcemapsを参照してください）。残念ながら、接頭辞オプションはサブフォルダには役立ちません。幸い、GulpはsourceMappingURLPrefixの関数を指定することでこれを処理することもできます。

コンパイルされたjsへのパスを持つオブジェクトが関数に渡されるため、少しの文字列操作で.mapファイルへのパスも作成できます（同じフォルダに一緒にあります）。

マイ一気ビルドタスクは、この（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)); 
}); 

これは今も正常にこのようなサブフォルダを参照して、私のコンパイルのjsにsourceMappingURLの絶対パスを生成します：/＃sourceMappingURL = http://localhost:9000/dist/customElements/listview.js.map

Firefoxは.tsファイルとデバッガの機能を期待どおりに読み込んでいます。 これはChromeでも動作しています。

私は見つけることに熱心だ、より良い方法があるので、もし私はガルプの専門家です。

アップデート：私は最近、これまでのところ、私はがぶ飲み+のJSPMよりもはるかに簡単見つけるのですオーレリア-CLIを使用してに切り替えています。どちらもFirefox &クロムは設定が不要な.tsファイルを正しくピックアップします。