Debugging minified JavaScript in Visual Studio wit

问题:

We have an ASP.NET 3.5 (IIS Application Pool 2.0) webSite. We are developing it with Visual Studio 2013 update4 in Windows8.1.
The problem is that: When I minify JavaScript files (with Web Essentials extension) and change the aspx files to use the newly created min.js files, the debugger of Visual Studio or any other browser wont works correctly. We expected that we work on the original js file (put a breakpoint etc. . .), and web browser runs it's minified min.js file (since relations exist in the map file), but in Visual Studio my break points turns into hollow yellow circle (with Tooltip: The breakpoint will not currently be hit. No Symbols have been . . .) even after I refresh the page with hitting Ctrl+F5 and when debugging in Chrome many weird problems happens like: variable's value cannot be read, break point do not hits in right place and . . .
What I try so far is cleaning, rebuilding the web project in Visual Studio, reset the Internet Explorer and Chrome settings and updating Visual Studio and Web Essentials extension and minify the JavaScript Files again with new version.

回答1:

Building further on this answer to another similar question: https://stackoverflow.com/a/27117035/19594

A simple sourcemaps file looks something like this:

{
    version : 3,
    file : "someFile.js",
    sourceRoot : "/",
    sources : ["some/relative/path/someFile.ts"],
    names : ["bla", "bla", "bla"],
    mappings: "aaaG,agAA,agGG,acAA"
}

If the values for sources or sourceRoot are relative paths (as in the above example), Visual Studio won't know what source files to connect to.

You need to set either sources or sourceRoot to point to an absolute path. You can probably do this in one of several ways:

Either manualy edit the .js.map file to reflect an absolute path. Like this:

{
    version : 3,
    file : "someFile.js",
    sourceRoot : "c:\my-absolute-root-path/",
    sources : ["some/relative/path/someFile.ts"],
    names : ["bla", "bla", "bla"],
    mappings: "aaaG,agAA,agGG,acAA"
}

Or set up you sourcemap generator to emit the full path. I used gulp and gulp-sourcemaps like this:

var gulp = require("gulp");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var sourcemaps = require("gulp-sourcemaps");
var uglify = require("gulp-uglify");

var srcFiles = ["**/*.js"];
var distPath = "dist/";

gulp.task("default", function () {
    return gulp.src(jsSrcFiles)
        .pipe(sourcemaps.init())
        .pipe(concat("app.js"))
        .pipe(uglify())
        .pipe(rename("app.min.js"))
        .pipe(sourcemaps.write(".", { includeContent: false, sourceRoot: "C:\my-absolute-root-path" }))
        .pipe(gulp.dest(distPath));
});