[英]Wrong Javascript sourcemap mapping on Visual Studio 2017
I've created a new project on VS 2017. I'm using webpack to bundle the JS files. 我在VS 2017上创建了一个新项目。我正在使用webpack捆绑JS文件。 my webpack.config.js file is - 我的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"
};
I am trying to debug chrome from the visual studio. 我正在尝试从visual studio调试chrome。 if i'm placing a breakpoint on the index_bundle.js file - it works great, it stops at the breakpoint and it even maps it to the right file. 如果我在index_bundle.js文件上放置一个断点 - 它运行良好,它在断点处停止,它甚至将它映射到正确的文件。 The problem occurs when i try to place a break point on the original js file. 当我尝试在原始js文件上放置一个断点时,会出现问题 。 for example app.js - it will try and place the breakpoint on the bootstrap 14248a9c8b87e0f9032f file - which it the wrong file. 例如app.js - 它会尝试将断点放在bootstrap 14248a9c8b87e0f9032f文件中 - 这是错误的文件。 I think VS has a problem reading the map file. 我认为VS在阅读地图文件时遇到了问题。 Here is the map file i created: 这是我创建的地图文件:
{
"version": 3,
"sources": [ "webpack:///webpack/bootstrap 14248a9c8b87e0f9032f", "webpack:///./funcs.js", "webpack:///./app.js" ],
"names": [],
}
Seems like it tries to put the breakpoint on the bootstrap file on the relative line as pressed on the original file. 好像它试图将断点放在原始文件上按下的相对行上的bootstrap文件中。 (For example, if i were to swap the bootstrap entry on the map file with the app.js entry - it seems to place the breakpoint in the right place) (BTW, i didn't put all the map file content - it is too long, didn't put the mapping,sourceContent,file and sourceRoot entries) (例如,如果我要使用app.js条目交换地图文件上的引导条目 - 它似乎将断点放在正确的位置) (顺便说一句,我没有把所有的地图文件内容 - 它是太长了,没有把map,sourceContent,file和sourceRoot条目放到
I ran across a similar issue, but we are using browserify rather than webpack. 我遇到了类似的问题,但我们使用的是browserify而不是webpack。 I had an opportunity to talk to a developer on the VS2017 dev team at BUILD this week and he indicated that a simple check is to ensure Edge can see the original files in the Debugger view. 我本周有机会与BUILD的VS2017开发团队的开发人员交谈,他表示,一个简单的检查是确保Edge能够在Debugger视图中看到原始文件。 If so, the sourcemaps are properly being produced. 如果是这样,则正确生成源图。
In my case, I had several issues. 就我而言,我有几个问题。 Here is the toolset I'm using: 这是我正在使用的工具集:
browserify
gulp-sourcemaps
uglify
My gulp
task looked as follows: 我的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());
});
I happened to be using a very old version of gulp-sourcemaps
(1.7.1). 我碰巧使用的是gulp-sourcemaps
(1.7.1)的旧版本。 What this ended up doing was producing the sourcemaps comment at the end of my minified JavaScript file rather than on a newline. 最终做的是在我缩小的JavaScript文件的末尾而不是在换行符上生成源映射注释。 Additionally, the literal text null
appeared right after .map
which prevented the browser from even seeing the sourcemap file. 此外,文字文本null
出现在.map
之后,这阻止了浏览器甚至看到源图文件。 Once I upgraded to latest gulp-sourcemaps
(2.6.0), it ensured the sourcemap comment was on the last line of the file and didn't have null
at the end. 一旦我升级到最新gulp-sourcemaps
(2.6.0),它确保源文件注释位于文件的最后一行,并且最后没有null
。
The second problem was getting Visual Studio to know where the sources are properly located. 第二个问题是让Visual Studio知道源的位置。 The paths for my project look as follows: 我项目的路径如下:
When hosting, the JavaScript is accessed by going to /js/site.min.js
, not /wwwroot/js/site.min.js
. 托管时,访问/js/site.min.js
, 而不是 /wwwroot/js/site.min.js
访问JavaScript。 However, at this time, the sourcemaps looked like the following: 但是,此时,源图看起来如下所示:
{
"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"
}
Therefore, I had to use the following gulp task to get it to remove wwwroot
and point the sourceroot up a directory: 因此,我必须使用以下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());
});
This produced a sourcemap that looks like the following: 这产生了一个如下所示的源图:
{
"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":"../"
}
With this, Chrome picked it up without an issue and so did Visual Studio! 有了这个,Chrome就毫无问题地选择了它,Visual Studio也是如此!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.