Question

我在VS 2017上创建了一个新项目。我正在使用webpack捆绑JS文件。我的webpack.config.js文件是 -

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

我正在尝试从visual studio调试chrome。如果我在index_bundle.js文件上放置一个断点 - 它运行良好，它在断点处停止，它甚至将它映射到正确的文件。当我尝试在原始js文件上放置断点时，会出现问题。例如 app.js - 它会尝试将断点放在 bootstrap 14248a9c8b87e0f9032f 文件中 - 这是错误的文件。我认为VS在阅读地图文件时遇到了问题。这是我创建的地图文件：

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

似乎它试图将断点放在原始文件上按下的相对行上的bootstrap文件中。（例如，如果我要使用app.js条目交换地图文件上的引导条目 - 它似乎将断点放在正确的位置） （顺便说一句，我没有把所有的地图文件内容 - 它太长了，没有放映射，sourceContent，文件和sourceRoot条目）

Answer 1

我遇到了类似的问题，但我们使用的是browserify而不是webpack。我本周有机会与BUILD的VS2017开发团队的开发人员交谈，他表示，一个简单的检查是确保Edge能够在Debugger视图中看到原始文件。如果是这样，则正确生成源图。

就我而言，我有几个问题。以下是我使用的工具集：

browserify
gulp-sourcemaps
uglify

我的gulp任务看起来如下：

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

我碰巧使用的是gulp-sourcemaps（1.7.1）的旧版本。最终做的是在我缩小的JavaScript文件的末尾而不是在换行符上生成源映射注释。此外，文字文本null出现在.map之后，这阻止了浏览器甚至看到源图文件。我升级到最新gulp-sourcemaps（2.6.0）后，确保源图注释位于文件的最后一行，并且最后没有null。

第二个问题是让Visual Studio知道源的位置。我项目的路径如下：

应用程序文件夹
- wwwroot的
- JS
  - site.min.js
  - site.min.js.map
  - release_dashboard.js

托管时，转到/js/site.min.js，不 /wwwroot/js/site.min.js即可访问JavaScript。但是，此时，源图看起来如下所示：

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

因此，我必须使用以下gulp任务来删除wwwroot并将sourceroot指向一个目录：

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

这产生了一个如下所示的源图：

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

有了这个，Chrome就可以毫无问题地选择它，Visual Studio也是如此！

Visual Studio 2017上的Javascript源映射映射错误

1 个答案: