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

Question

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

Answer 1

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

一个简单的 sourcemaps 文件如下所示：

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