Pertanyaan Pemetaan pemetaan sumber JavaScript salah pada Visual Studio 2017


Saya telah membuat proyek baru di VS 2017. Saya menggunakan webpack untuk memaketkan file JS. file webpack.config.js saya -

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

Saya mencoba melakukan debug chrome dari studio visual. jika saya menempatkan breakpoint pada file index_bundle.js - kerjanya bagus, ia berhenti di breakpoint dan bahkan memetakannya ke file yang tepat. Itu masalah terjadi ketika saya mencoba untuk menempatkan titik istirahat pada file js asli. sebagai contoh app.js - Ini akan mencoba dan menempatkan breakpoint pada bootstrap 14248a9c8b87e0f9032f file - yang mana file yang salah. Saya pikir VS memiliki masalah membaca file peta. Berikut ini file peta yang saya buat:

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

Sepertinya mencoba untuk menempatkan breakpoint pada file bootstrap pada garis relatif seperti yang ditekan pada file asli. (Sebagai contoh, jika saya menukar entri bootstrap pada file peta dengan entri app.js - tampaknya menempatkan breakpoint di tempat yang tepat) (BTW, saya tidak meletakkan semua konten file peta - terlalu panjang, tidak memasukkan entri pemetaan, konten sumber, file, dan entri sourceRoot)


5
2018-04-19 15:02


asal


Jawaban:


Saya mengalami masalah serupa, tetapi kami menggunakan browserify daripada webpack. Saya memiliki kesempatan untuk berbicara dengan pengembang di tim pengembang VS2017 di BUILD minggu ini dan dia menyatakan bahwa pemeriksaan sederhana adalah memastikan Edge dapat melihat file asli dalam tampilan Debugger. Jika demikian, sumber daya tersebut diproduksi dengan benar.

Dalam kasus saya, saya punya beberapa masalah. Berikut ini adalah toolset yang saya gunakan:

  • browserify
  • gulp-sourcemaps
  • uglify

Saya gulp tugas tampak sebagai berikut:

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

Saya kebetulan menggunakan versi yang sangat lama gulp-sourcemaps (1.7.1). Apa yang akhirnya ini lakukan adalah menghasilkan komentar sumber daya di akhir file JavaScript saya yang diperkecil daripada pada baris baru. Selain itu, teks literal null muncul tepat setelahnya .map yang mencegah browser bahkan melihat file sumber daya. Setelah saya upgrade ke terbaru gulp-sourcemaps (2.6.0), memastikan komentar sumber daya berada di baris terakhir file dan tidak ada null pada akhirnya.

Masalah kedua adalah mendapatkan Visual Studio untuk mengetahui di mana sumber-sumber tersebut ditempatkan dengan tepat. Jalur untuk proyek saya terlihat sebagai berikut:

  • Folder Aplikasi
    • wwwroot
    • js
      • site.min.js
      • site.min.js.map
      • release_dashboard.js

Saat hosting, JavaScript diakses dengan pergi ke /js/site.min.js, tidak  /wwwroot/js/site.min.js. Namun, pada saat ini, sumber makanan terlihat seperti berikut:

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

Oleh karena itu, saya harus menggunakan tugas gulp berikut untuk menghapusnya wwwroot dan arahkan sourceroot ke direktori:

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

Ini menghasilkan sourcemap yang terlihat seperti berikut:

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

Dengan ini, Chrome mengambilnya tanpa masalah dan begitu pula Visual Studio!


0
2018-05-13 22:28