Wrong Javascript sourcemap mapping on Visual Studio 2017

Question

I've created a new project on VS 2017. I'm using webpack to bundle the JS files. my webpack.config.js file is -

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

I am trying to debug chrome from the visual studio. if i'm placing a breakpoint on the index_bundle.js file - it works great, it stops at the breakpoint and it even maps it to the right file. The problem occurs when i try to place a break point on the original js file. for example app.js - it will try and place the breakpoint on the bootstrap 14248a9c8b87e0f9032f file - which it 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": [],
}

Seems like it tries to put the breakpoint on the bootstrap file on the relative line as pressed on the original file. (For example, if i were to swap the bootstrap entry on the map file with the app.js entry - it seems to place the breakpoint in the right place) (BTW, i didn't put all the map file content - it is too long, didn't put the mapping,sourceContent,file and sourceRoot entries)

Answer 1

I ran across a similar issue, but we are using browserify rather than webpack. I had an opportunity to talk to a developer on the VS2017 dev team at BUILD this week and he indicated that a simple check is to ensure Edge can see the original files in the Debugger view. If so, the sourcemaps are properly being produced.

In my case, I had several issues. Here is the toolset I'm using:

• browserify
• gulp-sourcemaps
• uglify

My gulp task looked as follows:

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 be using a very old version of gulp-sourcemaps (1.7.1). What this ended up doing was producing the sourcemaps comment at the end of my minified JavaScript file rather than on a newline. Additionally, the literal text null appeared right after .map which prevented the browser from even seeing the sourcemap file. Once I upgraded to latest gulp-sourcemaps (2.6.0), it ensured the sourcemap comment was on the last line of the file and didn't have null at the end.

The second problem was getting Visual Studio to know where the sources are properly located. The paths for my project look as follows:

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

When hosting, the JavaScript is accessed by going to /js/site.min.js , not /wwwroot/js/site.min.js . However, at this time, the sourcemaps looked like the following:

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

Therefore, I had to use the following gulp task to get it to remove wwwroot and point the sourceroot up a 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 produced a sourcemap that looks like the following:

{
  "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 picked it up without an issue and so did Visual Studio!