錯誤的Javascript sourcemap測繪2017年

Question

我已經創建了一個新的項目在2017年VS 我使用的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試圖調試鉻。 如果我在index_bundle.js文件上放置一個斷點 - 它工作的很好，它停在斷點處，它甚至將它映射到正確的文件。 當我嘗試把一個破發點上的原始js文件的問題發生。例如app.js - 它會嘗試放在引導14248a9c8b87e0f9032f文件斷點 - 這是錯誤的文件。 我認爲VS讀取地圖文件時有問題。這裏是地圖文件我創建：

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

好像它試圖把斷點上引導文件的相對行原始文件的壓制。 （例如，如果我是交換在與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 0.1）。最終做的是在縮小的JavaScript文件末尾生成源映射評論，而不是換行。此外，文字null出現在.map之後，這使瀏覽器無法看到源圖文件。一旦我升級到最新的gulp-sourcemaps（2.6.0），它確保源代碼評論位於文件的最後一行，最後沒有null。

的第二個問題是越來越Visual Studio中知道來源的正確定位。如下爲我的項目看路徑：

• app文件夾
  • wwwroot的
  • JS
    • site.min。JS
    • site.min.js.map
    • release_dashboard.js

當託管，JavaScript的是要/js/site.min.js訪問，不/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" 
} 

因此，我不得不使用下面的一口任務得到它刪除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()); 
}); 

這產生了sourcemap看起來像以下：

{ 
    "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的！