En este post aprenderás sobre cómo depurar, cuáles son las herramientas existentes, y por qué deberías implementar ndb al hacer debug en tus proyectos Node.js ⬢
Es muy usual que como programadores encontremos errores de vez en cuando mientras estamos trabajando, algunos de estos son más sencillos que otros, pero finalmente todos inesperados. A este tipo de errores les denominan bugs como "bicho" en inglés (y al proceso de búsqueda de bugs se le llama debuggear).
ⓘ Bug/bicho: Error o fallo en software. Resultado indeseado.
Hablando brevemente de historia: el término empieza a ser usado en el siglo XIX, cuando muchas veces los fallos se daban debido a que un bicho o insecto sin querer se metía en las máquinas y estorbaba en el movimiento de las piezas.
Debugging
Se refiere a la búsqueda y detección de errores en el código. En español, este proceso es llamado depuración y existen técnicas y herramientas para depurar un programa.
Una práctica muy común es leer varias veces el código, tipo pruebas de escritorio, o incluso mostrarle el error a algún compañero, y de pronto te iluminas. Esta práctica, termina derivando en el famoso Rubber duck debugging donde un pato de goma te ayudará a identificar los bugs...
Y si lo piensas, describir el código puede ser largo y no siempre habrá alguien con tiempo para escucharte, pero sí: un pato de goma. En este proceso, revisas lógica y sintaxis y encuentres la solución tú solo, así que no suena tan mal.
También existen los debuggers, que son herramientas o aplicaciones que te ayudan a identificar errores durante varias etapas del desarrollo. En estos entornos controlados se crean condiciones para reproducir bugs, y durante la ejecución (la cual sucede paso a paso) se evaluan todas las variables e incluso se pueden hacer pausas donde sea necesario para verificar valores o los cambios que se vayan haciendo.
Node Debugging
TALK DE LA SEMANA
En VSCode: Debuggers
Algunos paquetes de lenguajes de programación tienen debuggers que verifican el código en busca de errores mientras se escribe. Revisemos las herramientas que podemos trabajar con proyectos desde la versión 8, en el editor: VSCode.
inspect
Es un depurador integrado de node, con el que logramos dejar el console.log y el print() de lado y nos acercar al debugging de forma fácil y amistosa.
Haremos el ejercicio de depuración con el siguiente código:
var base = 10
function mult(val1, val2) {
res = val1 * val2
return res;
}for(let a = 0; a < 5; a++){
console.log(mult(10, base));
base = 10;
}El archivo se llamará testdebug.js
Para ejecutarlo en modo desarrollo agregamos inspect en la línea de comandos y el nombre del archivo, de esta forma:
node inspect .\testdebug.jsLuego del comando anterior, podrás ver que en la consola se adjunta una sesión de depuración donde dice: Debugger listening on ws...
La sesión además permite que escribas en la línea de comando de la sesión (debug>).
También se debe mostrar la barra de estado y el panel Debug Console con el resultado de la depuración algo así:
Entonces si corremos el código anterior, seguramente obtendremos un resultado como este:
$ node .\testdebug.js
100
100
100
100
100Claramente se busca iterar y por alguna razón no se está incrementando el valor final, así que usaremos inspect para hallar el problema.
Pero antes debes saber que, para poder controlar el proceso de la depuración, se utilizan los breaking points (Bp) con el comando: sb(# línea) podemos agregarlos y con el comando cont continuamos la ejecución desde el último Bp hasta el siguiente.
Estas son algunas variaciones de sb():
setBreakpoint(), sb(): Establece un breaking point en el número de línea específica.
sb('fn()'): Establece un breaking point en la primera declaración del cuerpo de la función.
sb('fileName', 1): Establecer un breaking point en la primera línea del archivo especificado
sb('fileName', 1, 'arg < 4'): Establece un breaking point condicional en la primera línea del archivo especificado, que solo se interrumpe cuando su argumento < 4 evalúe como true.
clearBreakpoint('script.js', 1), cb(...): Borrar un breaking point del archivo especificado en la línea 1.
Para el paso a paso existen los siguientes comandos:
cont, c: Continuar ejecución
next, n: Paso siguiente línea
step, s: Paso in
out, o: Paso out
pause: Pausa el código en ejecución
repl: Permite evaluar el código de forma remota
help: Informa sobre otros comandos disponibles
ⓘ Al presionar enter sin escribir un comando, se repetirá el comando anterior del depurador.
Ahora sí. Para revisar el código con inspect, debemos de nuevo levantar una sesión de depuración y dentro de la sesión:
Usamos el comando cont, para saltar del debugger hasta el siguiente break
Colocamos un breaking point en la línea 8 donde se encuentra el console.log, que imprime la función mult(), hazlo con ayuda del comando sb(8)
Una vez en el breaking point, usaremos el comando repl, para tener acceso a los datos dentro del ciclo for.
Con ayuda de este paso, podemos incluso asignar valores manualmente para confirmar si el error se encuentra dentro o fuera de la función:
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
Finalmente, salimos del la interacción usando Ctrl + C.
Y repetimos para validar que el resultado debe ser 500, es decir, el objetivo inicial del programa.
En nuestra consola podemos ver la primera validación así:
$ node inspect .\testdebug.js
Debugger listening on ws://127.0.0.1:9229/f5c1b5e5
< For help, see: https://nodejs.org/en/docs/inspector
< Debugger attached.
Break on start in testdebug.js:1
> 1 var base = 10; // No existe breaking point,
2 function mult(val1, val2) { // muestra las sgts líneas y
3 res = val1 * val2 // habilita línea de comandos
debug> cont // comando: continuar
break in testdebug.js:6 // detiene en l:6 -> debugger
> 4 return res; // muestra pocas líneas sgtes
5 }
> 6 debugger;
> 7 for(let a = 0; a < 5; a++){
debug> sb(8) // agrega breaking point l:8
> 8 console.log(mult(10, base)); // muestra líneas dentro ciclo
> 9 base = 10
> 10}
debug> repl // Accedo a datos y los cambio
Press Ctrl+C to leave debug repl
> base
10
> base * 10 // realiza operación
100 // base: 100
// Aquí presionamos Ctrl + CLa segunda iteración, vuelve a dar 100 (también podemos revisar el valor de a que se encuentra en el ciclo for), pero gracias al resultado de base, podemos deducir:
debug> repl // vuelvo acceder a los datos o
Press Ctrl+C to leave debug repl // siemplemente presiono enter
> base * 10
100 // base debería ser 200¿Por qué base sigue siendo 100 y no incrementa a 200 en la 2da iteración? 🤔
Gracias a la herramienta inspect nos damos cuenta que el bug del código es solamente un error en asignar base, puesto que luego de iterar en el ciclo no se está sumando sino estableciendo el valor de 100.
-- inspect
Se trata de la misma herramienta anterior, sólo que en este caso hablamos de la integración del protocolo de depuración inspector de V8, la cual te permite adjuntar Chrome DevTools a las instancias de Node.js para la depuración.
ⓘ Chrome DevTools Herramientas para devs integradas en Google Chrome. Es decir, el inspeccionar del DOM, actividad de red, consola, etc.
Esta opción nos permite ciertas ventajas, por ejemplo cuando trabajo es particularmente importante que exista una interacción y una visibilidad del proceso un poco más "evidente" (quiero creer que es porque soy más visual), y con esta integración se puede lograr perfectamente a diferencia del trabajo por consola. Sin embargo, sólo es una cuestión de gustos, porque ambas formas (inspect e --inspect) son agradables de utilizar.
V8 Inspector se habilita pasando el flag --inspect en la línea de comandos al iniciar una app.
node inspect .\testdebug.jsTe dejo otro ejemplo de uso, te recomiendo uses la opción pantalla completa del reproductor:
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
✨ ndb ✨
Hasta acá revisamos dos opciones para hacer debugging propias en Node.js. Sin embargo, existe una herramienta externa, que en mi opinión, es la mejor: ndb.
Para instalar escribe:
npm install -g ndb // Global
npm install --save-dev ndb // LocalY luego para comenzar a depurar:
ndb testDebugNdb.js // Usas ndb en lugar de node
ndb node testDebugNdb.js // Alternativa: anteponer ndb Esta herramienta promete una "experiencia mejorada" en la ejecución del debuggig, gracias a que te ahorra mucho tiempo localizar los bugs, además que su paso a paso te permite ver valores de variables e incluso editarlas desde el navegador.
Acá te dejo el siguiente ejemplo:
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇