[英]Wrong Javascript sourcemap mapping on Visual Studio 2017
我在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條目交換地圖文件上的引導條目 - 它似乎將斷點放在正確的位置) (順便說一句,我沒有把所有的地圖文件內容 - 它是太長了,沒有把map,sourceContent,file和sourceRoot條目放到
我遇到了類似的問題,但我們使用的是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知道源的位置。 我項目的路徑如下:
托管時,訪問/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也是如此!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.