gpt4 book ai didi

javascript - Visual Studio 2017 上错误的 Javascript sourcemap 映射

转载 作者:搜寻专家 更新时间:2023-11-01 04:39:57 25 4
gpt4 key购买 nike

我在 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 读取 map 文件有问题。这是我创建的 map 文件:

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

似乎它试图将断点放在原始文件上按下的相对行上的 Bootstrap 文件上。 (例如,如果我用 app.js 条目交换映射文件上的 Bootstrap 条目 - 它似乎将断点放在正确的位置)(顺便说一句,我没有放所有的 map 文件内容 - 它太长了,没有放映射、sourceContent、文件和 sourceRoot 条目)

最佳答案

我遇到过类似的问题,但我们使用的是 browserify 而不是 webpack。本周我有机会在 BUILD 上与 VS2017 开发团队的开发人员交谈,他表示一个简单的检查是确保 Edge 可以在调试器 View 中看到原始文件。如果是这样,则源 map 正在正确生成。

就我而言,我遇到了几个问题。这是我正在使用的工具集:

  • 浏览器化
  • gulp-sourcemaps
  • 丑化

我的 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 文件的末尾而不是在换行符上生成 sourcemaps 注释。此外,文字文本 null 出现在 .map 之后,这甚至阻止浏览器看到 sourcemap 文件。一旦我升级到最新的 gulp-sourcemaps (2.6.0),它确保 sourcemap 注释位于文件的最后一行并且末尾没有 null .

第二个问题是让 Visual Studio 知道源的正确位置。我的项目路径如下所示:

  • 应用文件夹
    • www根目录
    • js
      • site.min.js
      • site.min.js.map
      • release_dashboard.js

托管时,通过转到 /js/site.min.js 访问 JavaScript,不是 /wwwroot/js/site.min.js 。然而,此时,sourcemaps 看起来像下面这样:

{
"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 都能毫无问题地识别它!

关于javascript - Visual Studio 2017 上错误的 Javascript sourcemap 映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43499453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com