Falsche Javascript Quellkartenzuordnung auf Visual Studio 2017

Question

Ich habe ein neues Projekt auf VS 2017 erstellt. Ich verwende Webpack, um die JS-Dateien zu bündeln. meine webpack.config.js Datei -

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" 
}; 

ich zu debuggen Chrom aus dem Visual Studio versuchen. Wenn ich einen Haltepunkt auf der index_bundle.js Datei platziere - es funktioniert gut, es stoppt am Haltepunkt und es bildet es sogar auf die richtige Datei ab. Das Problem tritt auf, wenn ich versuche, einen Unterbrechungspunkt auf der ursprünglichen js-Datei zu platzieren. zum Beispiel app.js - es wird versuchen und den Haltepunkt auf der bootstrap 14248a9c8b87e0f9032f Datei platzieren - was es die falsche Datei. Ich denke VS hat ein Problem beim Lesen der Map-Datei. Hier ist die Map-Datei i erstellt:

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

Scheint, wie es den Haltepunkt auf der Bootstrap-Datei auf der relativen Spiel zu setzen versucht, wie auf der Original-Datei gedrückt. (Zum Beispiel, wenn ich den Bootstrap-Eintrag in der Map-Datei mit dem app.js-Eintrag tauschen würde - es scheint, den Haltepunkt an der richtigen Stelle zu platzieren) (BTW, ich habe nicht den gesamten Inhalt der Map-Datei - es ist zu lang, hat die Mapping-, sourceContent-, file- und sourceRoot-Einträge nicht gesetzt) ​​

Answer 1

Ich stieß auf ein ähnliches Problem, aber wir verwenden browserify statt webpack. Ich hatte die Gelegenheit, diese Woche mit einem Entwickler des Entwicklerteams von VS2017 bei BUILD zu sprechen, und er gab an, dass eine einfache Überprüfung darin besteht, sicherzustellen, dass Edge die Originaldateien in der Debugger-Ansicht sehen kann. Wenn dies der Fall ist, werden die Quellkarten ordnungsgemäß erstellt.

In meinem Fall hatte ich mehrere Probleme. Hier haben wir das Toolset Ich verwende:

• browserify
• gulp-sourcemaps
• uglify

Meine gulp Aufgabe sah wie folgt aus:

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()); 
}); 

ich zufällig ein zu verwenden sehr alte Version von gulp-sourcemaps (1.7 .1). Am Ende meiner minimierten JavaScript-Datei und nicht auf einer neuen Zeile wurde der Quellmaps-Kommentar erstellt. Darüber hinaus erschien der Literaltext null direkt nach .map, die den Browser daran hinderte, die Quellkartendatei zu sehen. Nach dem Upgrade auf die neueste Version gulp-sourcemaps (2.6.0) stellte ich sicher, dass der Quellkommentar in der letzten Zeile der Datei stand und am Ende keine null hatte.

Das zweite Problem bestand darin, Visual Studio zu informieren, wo sich die Quellen befinden. Die Wege für mein Projekt wie folgt aussehen:

• App Ordner
  • wwwroot
  • js
    • site.min.js
    • site.min.js.map
    • release_dashboard.js

Wenn Hosting, die JavaScript, indem Sie auf /js/site.min.js, zugegriffen wird nicht/wwwroot/js/site.min.js. Doch zu diesem Zeitpunkt werden die sourcemaps wie folgt aus sah:

{ 
    "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" 
} 

Daher hatte ich die folgende schluck Aufgabe zu verwenden, um es wwwroot zu entfernen zu bekommen und die SourceRoot Punkt ein Verzeichnis nach oben:

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()); 
}); 

Dieses eine sourcemap erzeugt, der wie folgt aussieht:

{ 
    "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":"../" 
} 

damit nahm Chrome es ohne ein Problem und so tat Visual Studio!