使用源映射在Visual Studio中调试缩小的JavaScript

Question

我们有一个ASP.NET 3.5（IIS应用程序池2.0）网站。我们正在Windows8.1中使用Visual Studio 2013更新4进行开发。
问题是：当我缩小JavaScript文件（扩展名为Web Essentials）并将aspx文件更改为使用新创建的min.js文件时，Visual Studio或任何其他浏览器的调试器都无法正常工作。我们希望我们处理原始的js文件（放置断点等），并且web浏览器运行它的缩小的min.js（因为映射中存在关系），但在Visual Studio中，我的断点变成了空心的黄色圆圈（使用工具提示：断点当前不会被击中。没有符号…），即使在我用Ctrl+F5刷新页面后，以及在Chrome中调试时，也会发生许多奇怪的问题，比如：变量的值无法读取，断点没有命中正确的位置，以及
到目前为止，我尝试的是清理，在Visual Studio中重建web项目，重置Internet Explorer和Chrome设置，更新Visual Studio和web Essentials扩展，并使用新版本再次缩小JavaScript文件。

Answer 1

在此基础上进一步回答另一个类似问题：https://stackoverflow.com/a/27117035/19594

一个简单的源映射文件如下所示：

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

如果sources或sourceRoot的值是相对路径（如上例所示），Visual Studio将不知道要连接到什么源文件。

您需要将sources或sourceRoot设置为指向绝对路径。你可能可以通过以下几种方式之一来做到这一点：

手动编辑.js.map文件以反映绝对路径。像这样：

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

或者将源映射生成器设置为发出完整路径。我使用的gulp和gulp-sourcemaps是这样的：

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