Configurar debugger en vscode

En el curso se explica como hacer debug de nuestro código a través del navegador, pero en este tutorial, os explicaré como hacerlo mediante el propio editor de texto vscode.

Lo primero que haremos es crear el archivo launch.json, esto se puede hacer de 2 maneras, la primera es, crear en la raíz de tu área de trabajo, un directorio con el nombre: .vscode ( esta carpeta se usa para hacer ciertas configuraciones a tu área de trabajo ) y crear dentro un archivo con el nombre launch.json.

La segunda, en el menú lateral de vscode, tenemos diferentes iconos que nos desplegan ciertas funciones, haciendo click en el siguiente icono:

muestra un panel con los siguientes botones en la parte superior izquierda del editor:

haciendo click en el icono del engranaje, nos abrirá el archivo launch.json, el cual al guardarlo se nos generará en la carpeta anteriormente mencionada.

Una vez hemos creado el archivo debemos pasar a configurarlo, esto acepta múltiples configuraciones, para servidores corriendo en local, remoto, contenedores levantados con docker, nodemon, etc…
para no enrollarme en algo que podéis encontrar en la documentación oficial sobre como configurar debugger en vscode
, mostraré un ejemplo muy básico.

El archivo launch.json recién creado tiene el siguiente aspecto:

haciendo click en Add Configuration, mediante un selector, os creará configuraciones básicas en base a lo seleccionado, en este caso vamos a seleccionar “attach by ProcessId”, lo que nos añadirá la siguiente configuración:

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

Aquí lo que se define es que mediante un selector, podremos elegir un proceso que esté corriendo en nuestro ordenador y conectarnos a él.

Cuando ya tengamos esta configuración, veremos que en el menú de debug, donde anteriormente hicimos click en el engranaje, nos aparecerá en el selector la opción con el nombre que le hayamos puesto, en nuestro caso: “Attach by Process ID” y al hacer click en el icono de play, nos mostrará otro selector de procesos

Si no sabemos cual es el proceso al que nos queremos conectarnos, podemos lanzar en consola ( este comando funciona en ordenadores basados en UNIX, no estoy seguro si en windows funciona…) el comando “ps”

sí lo hemos hecho bien, veremos que en la consola donde está corriendo nuestro proceso de node, aparecerá el siguiente mensaje:

Debugger listening on ws://127.0.0.1:9229/b0c3dcdd-6220-40b6-8942-390169535ddb
For help see https://nodejs.org/en/docs/inspector
Debugger attached.

Esto nos confirmará que nos hemos conectado correctamente al proceso.

Una vez hecho esto, podemos poner breakpoints, en nuestro editor, haciendo click en el margen izquierdo del número de línea en el archivo que deseemos.

ahora si ejecutamos una acción que haga que nuestro código se ejecute, se detendrá justo donde hemos marcado.

Como en la captura podéis observar, la ejecución está detenida en la línea 12, y podemos ver en tiempo de ejecución, los valores de ciertas variables, ej: subrallado en rojo el contenido de this.collection, y en azul la instancia de ProductsService.

También podemos ir en la terminal integrada al tab DEBUG CONSOLE y escribir operaciones o nombres de variables para ver el resultado que darían en tiempo de ejecución:

Hasta aquí el tutorial de como configurar el depurador de nuestro editor con nuestro proceso de node, os animo a que lo probéis y uséis otros tipos de configuraciones más avanzadas, tal como se explica en la documentación que os dejé más arriba.

Si tenéis cualquier sugerencia, consulta o duda no dudéis en hacerla en los comentarios, también me gustaría ver que configuraciones os parecen más interesantes o que otros uso dais al depurador.

saludos y espero que os sea de utilidad.