Razzle: Depurar el servidor de nodos con vscode

Tengo buena suerte con adjuntar por ID de proceso. También hay una opción de configuración de inicio de sourceMaps vscode que puede establecer en verdadero.

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

@ajsharp gracias por tu respuesta :smiley_cat:

Igual que el método de adjuntar. No puedo establecer un punto de interrupción en src/index.js.

La opción sourceMaps es verdadera de forma predeterminada (cf. https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps)

Resolví esto usando una configuración de mapa fuente diferente, a VSCode no parece gustarle el 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
}

e inicie el servidor con yarn start --inspect --inspect-port 9230

* editado, gracias @dguyonvarch por detectar el error.

@benhamlin :smile_cat: ¡Funciona bien!
Acabo de arreglar tu fragmento con:

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

Encuentro esto en razzle/packages/razzle/config/createConfig.js línea 93:

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

Así que abro la polémica :wink: ! ¿Por qué cheap-module-source-map en lugar de eval-source-map ?

¿Alguien quiere agregar una sección a los documentos sobre esta receta?

@jaredpalmer ¿Puedo proponer una solicitud de fusión con eval-source-map ? No es necesario actualizar el documento en este caso.

¡Hola! Así que este es el trato, entre el código abierto y mi trabajo diario y la vida y lo que no, tengo mucho que administrar, por lo que uso un bot de GitHub para automatizar algunas cosas aquí y allá. Este bot de GitHub en particular va a marcar esto como obsoleto porque no ha tenido actividad reciente durante un tiempo. Se cerrará si no se produce más actividad en unos días. No se lo tome como algo personal, en serio, es una acción completamente automatizada. Si esto es un error, simplemente haga un comentario, envíeme un mensaje privado, envíe una paloma mensajera o una señal de humo.

ProBot cerró automáticamente esto debido a la inactividad. Grita si se trata de un error y lo volveremos a abrir.

Actualización: una mejor manera de hacer que vscode depure el servidor es agregar esto a su launch.json y dejar la configuración predeterminada de devtool en razzle.

Esto permitirá la depuración de VSCode, así como una mejor experiencia de depuración del cliente (eval-source-maps rompe el visor de errores de depuración de React).

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

Gracias @benhamlin. ¿Tiene alguna forma de volver a conectarse fácilmente a la instancia del depurador en VSCode después de hacer un reinicio suave ( rs y luego ENTER ) en Razzle?

ATM si hago un reinicio suave, el depurador VSCode se desconecta, por lo que luego tengo que matar el servidor y reiniciarlo, luego volver a conectar el depurador.

@benhamlin Funciona a las mil maravillas con esta configuración :wink:

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

@ourmaninamsterdam RS reinicia el servidor en un nuevo puerto de depuración (9230 + 1), por lo que debe cambiar el puerto adjunto en la configuración de inicio. No investigué más :decepcionado: