Incorrect display of the original Javascript map on Visual Studio 2017

Question

I created a new project on VS 2017. I use webpack to link JS files. my webpack.config.js file is

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

I am trying to debug chrome from visual studio. if I put a breakpoint in the index_bundle.js file - it works fine, it stops at the breakpoint and even matches it with the correct file. The problem occurs when I try to put a breakpoint in the js source file. for example app.js - it will try to place a breakpoint in the bootstrap file 14248a9c8b87e0f9032f , which is the wrong file. I think VS has a problem reading the map file. Here is the map file I created:

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

It seems to be trying to put a breakpoint on the bootstrap file on a relative line, as shown in the source file. (For example, if I were to change the boot record in the map file using the app.js entry - it apparently puts a breakpoint in the right place) (BTW, I did not put the entire contents of the map file - it is too long, did not put matching records, sourceContent, file and sourceRoot)

Answer 1

I ran into a similar problem, but we are using a browser, not webpack. I had the opportunity to speak with the developer on the VS2017 development team on BUILD this week, and he pointed out that a simple check is that Edge can see the source files in the Debugger view. If so, source maps are created appropriately.

In my case, I had a few questions. Here is the toolbox I am using:

• browserify
• gulp-sourcemaps
• uglify

My gulp task looked like this:

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

I happened to use a very old version of gulp-sourcemaps (1.7.1). What this ended up creating a sourcemaps comment at the end of my miniature JavaScript file, and not in a new line. In addition, the literal text null appeared immediately after .map , which prevented the browser from even seeing the sourcemap file. As soon as I upgraded to the latest gulp-sourcemaps (2.6.0), it ensured that the comment sourcemap was on the last line of the file and did not have null at the end.

The second problem was that Visual Studio knew where the sources were. The paths for my project are as follows:

• Application folder
  • Wwwroot
  • Js
    • site.min.js
    • site.min.js.map
    • release_dashboard.js

When hosting, JavaScript is accessed using /js/site.min.js rather than /wwwroot/js/site.min.js . However, at this time, the source maps looked as follows:

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

So I had to use the following gulp task to remove it wwwroot and point sourceroot to the directory:

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

This created the source map, which looks like this:

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

With this, Chrome took it without a problem, as well as Visual Studio!