Razzle: Debug server simpul dengan vscode

Saya beruntung dengan melampirkan id proses. Ada juga opsi konfigurasi peluncuran sourceMaps vscode yang dapat Anda atur ke true.

    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "restart": true
    }

@ajsharp terima kasih atas balasan Anda :smiley_cat:

Sama seperti metode melampirkan. Saya tidak dapat mengatur breakpoint di src/index.js.

Opsi sourceMaps benar secara default (lih. https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps)

Saya memecahkan ini menggunakan pengaturan peta sumber yang berbeda, VSCode sepertinya tidak menyukai cheap-module-sourcemap .
razzle.config.js :

module.exports = {
    modify(config, { target, dev }, webpack) {
        config.devtool = dev ? 'eval-source-map' : 'none';
        return config;
    }
}

launch.json :

{
    "name": "Attach to dev server",
    "type": "node",
    "request": "attach",
    "protocol": "inspector",
    "address": "localhost",
    "port": 9230
}

dan mulai server dengan yarn start --inspect --inspect-port 9230

* diedit, terima kasih @dguyonvarch untuk menangkap kesalahan.

@benhamlin :smile_cat: Ini berfungsi dengan baik!
Saya baru saja memperbaiki cuplikan Anda dengan:

module.exports = {
  modify: (config, { target, dev }, webpack) => {
      config.devtool = dev ? 'eval-source-map' : 'none';
      return config
  }
}

Saya menemukan ini di razzle/packages/razzle/config/createConfig.js baris 93:

// Controversially, decide on sourcemaps.
devtool: 'cheap-module-source-map'

Jadi saya membuka kontroversi :wink: ! Mengapa cheap-module-source-map daripada eval-source-map

Adakah yang ingin menambahkan bagian ke dokumen tentang resep ini?

@jaredpalmer Bolehkah saya mengajukan permintaan Gabung dengan eval-source-map ? Tidak perlu memperbarui dokumen dalam kasus ini.

Halo! Jadi inilah masalahnya, antara open source dan pekerjaan sehari-hari dan kehidupan saya dan yang tidak, saya memiliki banyak hal untuk dikelola, jadi saya menggunakan bot GitHub untuk mengotomatiskan beberapa hal di sana-sini. Bot GitHub khusus ini akan menandai ini sebagai basi karena tidak memiliki aktivitas baru-baru ini untuk sementara waktu. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi dalam beberapa hari. Jangan menganggap ini pribadi--serius--ini adalah tindakan yang sepenuhnya otomatis. Jika ini kesalahan, cukup beri komentar, DM saya, kirim pidgeon pembawa, atau sinyal asap.

ProBot secara otomatis menutup ini karena tidak aktif. Holler jika ini adalah kesalahan, dan kami akan membukanya kembali.

Pembaruan: Cara yang lebih baik untuk mendapatkan vscode untuk men-debug server adalah dengan menambahkan ini ke launch.json Anda, dan membiarkan konfigurasi devtool ke default razzle.

Ini akan memungkinkan debugging VSCode, serta pengalaman debugging klien yang lebih baik (eval-source-maps merusak penampil kesalahan debug React).

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
 }

Terima kasih @benhamlin. Apakah Anda jika ada cara untuk menyambung kembali dengan mudah ke instance debugger di VSCode setelah melakukan soft restart ( rs then ENTER ) di Razzle?

ATM jika saya melakukan soft restart, debugger VSCode terputus, jadi saya harus mematikan server dan memulai kembali kemudian menghubungkan kembali debugger.

@benhamlin Ini berfungsi seperti pesona dengan konfigurasi ini :wink:

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9230,
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

@ourmaninamsterdam RS restart server pada port debug baru (9230 + 1), jadi Anda harus mengubah port attach di konfigurasi peluncuran. Saya tidak menyelidiki lebih lanjut :kecewa: