JSスタックトレースでソースマップを使用するには？

Question

私はJSコードに誤りがある場合、私はスタックトレースのこの種の持っている：あなたが見ることができるようにそれあなた縮小さファイル、

Error while processing route: admin.subscriptions/edit The adapter operation was aborted Error 
    at n.i (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1375) 
    at n (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:1600) 
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:4777) 
    at i.c.error (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:62:8222) 
    at u (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:17397) 
    at Object.fireWith [as rejectWith] (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:5:18168) 
    at r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:22154) 
    at XMLHttpRequest.<anonymous> (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:6:26964) 
    at XMLHttpRequest.r (http://test.com/assets/vendor-160ad2febac0712c4d0db4e856197579.js:50:30564) 

をし、元のマップファイルを使用するように思われません。ソースマップファイルは正常に動作しています。これはChromeとFirefoxでこれを行います。

スタックトレースを改善するにはどうすればよいですか？あなたのdevのツールを開き、F1を押すか、右上の3個のドットをクリックして、ソースの下であなたがJavaScriptソースがをマップ有効にすることができます

Answer 1

。このオプションがオンになっていることを確認してください。

ブラウザを使用すると、エラースタックトレースをマッピングする場合は、ソース・マップへのアクセスを持っている必要があることに注意してください。プロダクションでは、おそらく、ユーザーにとって隠されていない可能性があり、難読化されていないコードを検査するため、ユーザーから隠されたままにしておきたいと考えています。サービスは、Sentryがソースマップをアップロードする機能を提供しています。この方法では、開発者だけがエラーを予見します。

ソースマップがリロードされていないという問題もありました。これを修正するには、Alt + を押してDevToolsをリロードしてください。あなたは本当にあなたが使用しており、縮小プロセス、多分問題は、あなたがそれらを生成する方法に依存していたものビルドシステム私たちに語っていなかったが与えられ

---

。

は一気のために、ここにあなたがsourcemaps pluginとsourcemapsを生成しない方法です：

import sourcemaps from 'gulp-sourcemaps' 

gulp.task('js',() => { 
    gulp.src('src/**/*.js') 
    .pipe(sourcemaps.init()) 
    // other pipes.. 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('dist')) 
}) 

WebPACKの下では、あなただけのinline-source-mapsまたはsource-mapsのようなものにdevtool settingを変更する必要があります。他にもいくつかの設定があり、生産に適したものを正確に詳述し、速度/マッピングを比較します。

source-map-supportもノードで使用できますが、ソースマップを生成してsourceMappingURLコメントにリンクする必要があります。