Ánh xạ sourcemap Javascript sai trên Visual Studio 2017

Question

Tôi đã tạo một dự án mới trên VS 2017. Tôi đang sử dụng webpack để đóng gói các tệp JS. tệp webpack.config.js của tôi là -

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

Tôi đang cố gỡ lỗi chrome khỏi studio trực quan. nếu tôi đang đặt điểm ngắt trên tệp index_bundle.js - nó hoạt động tốt, nó dừng lại ở điểm ngắt và thậm chí nó ánh xạ nó vào đúng tệp. Vấn đề xảy ra khi tôi cố gắng đặt điểm ngắt trên tệp js gốc. ví dụ app.js - nó sẽ thử và đặt điểm ngắt trên tệp tin bootstrap 14248a9c8b87e0f9032f - tệp sai. Tôi nghĩ VS có vấn đề khi đọc tệp bản đồ. Đây là tệp bản đồ tôi đã tạo:

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

Có vẻ như nó cố gắng đặt điểm ngắt trên tệp bootstrap trên dòng tương đối như được nhấn vào tệp gốc. (Ví dụ: nếu tôi trao đổi mục nhập bootstrap trên tệp bản đồ với mục nhập app.js - có vẻ như đặt điểm ngắt ở đúng vị trí) (BTW, tôi đã không đặt tất cả nội dung tệp bản đồ - nó quá dài, không đặt các mục ánh xạ, sourceContent, file và sourceRoot)

Answer 1

Tôi chạy trên một vấn đề tương tự, nhưng chúng tôi đang sử dụng trình duyệt thay vì webpack. Tôi đã có cơ hội nói chuyện với một nhà phát triển trong nhóm phát triển VS2017 tại BUILD tuần này và anh ta chỉ ra rằng việc kiểm tra đơn giản là đảm bảo Edge có thể xem các tệp gốc trong khung nhìn Debugger. Nếu vậy, các sourcemaps được sản xuất đúng cách.

Trong trường hợp của tôi, tôi có một số vấn đề. Dưới đây là bộ công cụ Tôi đang sử dụng:

• browserify
• gulp-sourcemaps
• uglify

Nhiệm vụ của tôi gulp trông như sau:

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

tôi tình cờ được sử dụng một phiên bản cũ của gulp-sourcemaps (1.7 .1). Điều này cuối cùng đã làm được sản xuất các bình luận sourcemaps vào cuối của tập tin JavaScript minified của tôi hơn là trên một dòng mới. Ngoài ra, văn bản theo nghĩa đen null xuất hiện ngay sau .map khiến trình duyệt không nhìn thấy tệp sourcemap. Sau khi tôi nâng cấp lên gulp-sourcemaps (2.6.0) mới nhất, nó đảm bảo nhận xét về bản đồ nguồn trên dòng cuối cùng của tệp và không có null ở cuối.

Vấn đề thứ hai là làm cho Visual Studio biết nơi nguồn được đặt đúng vị trí. Các đường dẫn cho cái nhìn dự án của tôi như sau:

• App Thư mục
  • wwwroot
  • js
    • site.min.js
    • site.min.js.map
    • release_dashboard.js

Khi lưu trữ, JavaScript được truy cập bằng cách vào /js/site.min.js, không/wwwroot/js/site.min.js. Tuy nhiên, vào thời điểm này, các sourcemaps trông giống như sau:

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

Vì vậy, tôi đã phải sử dụng nhiệm vụ ngụm sau đây để có được nó để loại bỏ wwwroot và điểm sourceroot lập một thư mục:

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

này tạo ra một sourcemap trông giống như sau:

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

với điều này, Chrome nhặt nó lên mà không có một vấn đề và cũng vậy Visual Studio!