Visual Studioで間違ったJavascriptのソースマップマッピング2017

Question

私はVS 2017で新しいプロジェクトを作成しました。 私はJSファイルをバンドルするためにwebpackを使用しています。 私webpack.config.jsファイルがある -

module.exports = { 
    entry: "./app.js", // bundle's entry point 
    output: { 
     path: __dirname + "/dist", // output directory 
     filename: "index_bundle.js" // name of the generated bundle 
    }, 
    devtool: "source-map" 
}; 

私は、Visual Studioからデバッグクロムにしようとしています。 index_bundle.jsファイルにブレークポイントを設定している場合、ブレークポイントで停止し、正しいファイルにマップされます。 問題は、元のjsファイルにブレークポイントを配置しようとすると発生します。例えばapp.js - ブレイクポイントをブートストラップ14248a9c8b87e0f9032fファイルに置いてみます - これは間違ったファイルです。 VSにマップファイルの読み込みに問題があると思います。ここに私が作成したマップファイルがある：それは、元のファイルに押されたとして相対ライン上のブートストラップファイルにブレークポイントを置くしようとするよう

{ 
    "version": 3, 
    "sources": [ "webpack:///webpack/bootstrap 14248a9c8b87e0f9032f", "webpack:///./funcs.js", "webpack:///./app.js" ], 
    "names": [], 
} 

は思えます。 （たとえば、マップファイルのbootstrapエントリをapp.jsエントリと入れ替えた場合、適切な場所にブレークポイントが置かれているようです） （私はすべてのマップファイルの内容を入れていませんでした。それは長すぎる、マッピング、sourceContent、ファイルとsourceRootエントリを入れていない）

Answer 1

私は同様の問題で走ったが、webpackではなくbrowserifyを使用している。今週BUILDのVS2017開発チームの開発者と話をする機会がありました.Edgeがデバッガビューで元のファイルを確実に見ることができることを確認することが簡単な指摘でした。そうであれば、ソースマップが正しく生成されています。

私の場合、いくつかの問題がありました。ここで私が使用しているツールセットは、次のとおりです。

• browserify
• gulp-sourcemaps
• uglify

次のように私のgulpタスクが見えた：

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(uglify()) 
     .pipe(sourcemaps.write('.', { 
      sourceMappingURL: function(file) { 
       return file.relative + '.map'; 
      } 
     })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

私が使用しているように起こりました非常に古いバージョンのgulp-sourcemaps（1.7 .1）。これが終わったのは、改行ではなく縮小されたJavaScriptファイルの最後にソースマップのコメントを生成することでした。さらに、という文字のテキストが.mapの直後に表示され、ブラウザでもsourcemapファイルが表示されなくなりました。最新のgulp-sourcemaps（2.6.0）にアップグレードすると、sourcemapコメントがファイルの最後の行にあることを確認し、最後にnullがないことを確認しました。

2番目の問題は、ソースが適切に配置されている場所をVisual Studioに知らせることでした。私のプロジェクトの一見のためのパスを次のように：

• アプリケーションフォルダ
  • wwwrootの
  • JS
    • site.min。
    • site.min.js.map JS
    • release_dashboard.js JavaScriptは/js/site.min.jsに行くことによってアクセスされ

  ホスティング

、 ない /wwwroot/js/site.min.js。しかし、この時点では、sourcemapsは次のように見えた：

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js" 
} 

はしたがって、私はそれがwwwrootを削除し、ディレクトリをsourcerootを指すように取得するには、次の一気のタスクを使用する必要がありました：

gulp.task('build:debug:js', function() { 
    return browserify('./wwwroot/js/site.js', { debug: true }) 
     .transform("babelify", { presets: ["es2015"] }) 
     .transform(stringify, { 
      appliesTo: { includeExtensions: ['.html'] } 
     }) 
     .bundle() 
     .pipe(source('site.min.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(sourcemaps.mapSources(function (sourcePath, file) { 
      return sourcePath.replace('wwwroot/', ''); 
     })) 
     .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../' })) 
     .pipe(gulp.dest('./wwwroot/js')) 
     .pipe(connect.reload()); 
}); 

これは、次のようになりますsourcemap生産：これにより

{ 
    "version":3, 
    "sources":[ 
    "node_modules/browser-pack/_prelude.js", 
    "wwwroot/js/release-dashboard.html", 
    "wwwroot/js/release-dashboard.js", 
    "wwwroot/js/site.js" 
    ], 
    "names":[], 
    "mappings":"SNIP", 
    "file":"site.min.js", 
    "sourceRoot":"../" 
} 

を、Chromeは問題なく、それを拾ったので、Visual Studioがやりました！