Nodejs Debugging en VSCode

¿Qué es Debugging?

• breakpoints

Ejemplo práctico

const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.send("Hello world")
});

app.listen(3000);

create launch.json

ve en el buttong debug, y crear un archivo launch.json

• create a launch.json file

guarda el archivo por defecto, y luego ejecuta el debug con el boton verde de la barra lateral.

• Launch Program

Otra forma de ejecutar tambien es presionando F1 y luego Debug npm script y seleccionando start

Usando el panel podemos hacer lo siguiente

• Step over, avanzar una instruccion
• Reset, volver a ejcutar la aplicacion
• Disconectar el debuger

Breakpoint

crea un brekapoint

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  req.author = 'fazt';
  res.send("Hello world");
});

app.listen(3000);

para haer un detach puedes presionar las teclas: shift + f5

inspect

basicamente cuando lanzamos nuestro proyecto usando el debuger de vscode inmediatamente la aplicacion se ejecuta en el modo debugging, pero que pasa si queremos ejecutar la aplicacion normalmente pero despues si lo necesitamos añadir el debugger. para esto sirve el argumento de node llamado inspect

node --inpect server.js

basicament lo que esto hace es que ejecuta la aplicacion y ejecuta un servidor de websockets para el debugger. Lo que tenemos que hacer desde Vscode para poder debugear este proceso, es que desde Vscode ve a la seccion Debug, y ejecuta addConfiguration y escoge: Nodejs Attach.

luego desde la barra lateral escoge, Attach y ejecuta el debugger.

tambien puedes presionar F1, y luego seleccionar la opcion: Attach to Node Process

inspect-brk

inspect tiene una variacion llamada break, inspect-brk lo que esto hace es que la aplicacion se ejecuta pero para en la primera linea y solo empezara si ejecuto (attach) un debugger. esto es exactamente lo mismo que hace el archivo launch solo que usando un proceso manual.

package.json

"debug": "node --inspect server.js"

es muy comun usar

Usando Google Chrome

usando el comando inspect, podemo usar vscode como cliente para debuggear, pero esto no se limita a vscode, otra forma de debugear es usando Google Chrome.

si visitas: chrome://inspect

lo que hara chrome es buscar todos los debuggers ejecutandose en tu computador y los listarra para que puedas conectarte (hacer attach) a ellos.

• Terminal
• Sources, tienes que otorgar permisos para que chrome pueda leer los archivos.
• Memory
• CPU profiler

las funcionalidades son las mismas basicmaente que vscode:

• tienes un panel para avanzar, reiniciar, el proceso de debugging
• puedes crear breakpoints

pero su venaja principal estaria en la pestaña Memrory y CPU Profiler.

tambien tienes una opcion para escoger otros proceso sen open node devtools en google chrome.