Debugger

AMO APRENDER A DEBUGGEAR! Muchas gracias! Lo mejor que me llevo del curso (No porque sea incompleto, sino porque ya hice otros cursos de node, tomo este para aprender mas bases)

Debugger

Node.js viene integrado con un modo de debug para poder conectarnos desde cualquier herramienta de inspección de código a nuestro código de node.js.

Podemos utilizar en la terminal el flag de --inspect con nodemon

npx nodemon --inspect http.js

Para poder acceder a debugger de chrome vamos a la url chrome://inspect/#devices y le dan a inspect en el remote target que quieres inspeccionar.

Tuve problemas para activar el modo debugger en Chrome ya que estoy utilizando VS Code con WSL, asi que segui los siguientes en el enlace para poder hacer el debug desde el mismo VS Code, espero les sirva.

https://github.com/microsoft/vscode-recipes/tree/master/nodemon

Espero que este mensaje llegue a mas personas.
Aparte del --inpsect existen otros metodos para debuggear node y es que hay un pequeño problema con esa flag y es que uno no puede detener la ejecucion, si usas esa flag en algo que corre muy rapido se saldra del inspector antes de si quiera abrir chrome.

Una forma de debuggear y parate en la primera linea de codigo (asi te da tiempo de abrir chrome y el debugger) es usar --inspect-brk, esto lo cual dicho iniciare el debugger y se denentra en la primera linea de codigo.

node --inspect-brk modulos/http.js

La otra opcion es una linea de codigo debugger y esta la debes colocar en el lugar donde quieres que se detenga el codigo
Ejemplo:

function f (n = 99) {
  if (n === 0) throw Error()
  debugger
  f(n - 1)
}
f()

A mi me han ayudado de sobremanera estas otras 2 formas de debuggear chrome! espero les pueda ayudar!

Wow! Y pensar que pensaba que jugaba un poco con Javascript y aún ni sabía jugar…
Muchas gracias!

Para los que ejecutan en VScode con WSL y no les funciona ese metodo de debuger pueden usar esto

en create Javascript debug terminal y ejecutan ahí node http.js (o como lo tengan)

Tenia problemas para abrir el debbuger cabe mencionar que de esta clase al 2022 ya han pasado algunos años y aunque todo sigue vigente existen algunas diferencias pues se han implementado otras características muy útiles

1. Para ejecutar el inspector, cosa que se le paso al profesor fue iniciar nodemosn, esto depende de como lo hayas instalado, de forma local o global:
   nodemon local

npx nodemon --inspect my_file.js 

• Si lo instalaste globalmente solo quitale el npx, yo recomiendo que lo instalen localmente para que no tengan problemas a futuro con otras aplicaciones ya que como su nombre lo indica, la configuración que hagas de forma global le va a pegar a TODAAAS tus demás aplicaciones y pueden seguir problemas a futuro.

1. Cuando abres chrome://inspect tendrás 2 opciones disponibles, la que marca el profesor (opción 1) y la opción 2: Abrir con las herramientas de desarrollo dedicas para node, personalmente me estuve rompiedo la cabeza intentando usar la opción 1 y todo resulto más sencillo usando la opción 2.
   
   
2. Una vez dentro vete a Sources y recuerda que después de poner un breakpoint hacer una petición o recargar si ya tienes una hecha.
   
   
   Listo banda espero poder haberlos ayudado. Saludos C:

En fundamentos de JavaScript se entiende mejor

Hola, a mi si me funcionó, al momento de seleccionar la carpeta donde esta el proyectoChrome pregunta si deseamos dar el acceso, si no lo hacemos no se carga e listado de archivos en el debugger.

Genial la clase, necesita depurar lo que sucede con nuestras variables.

manito arriba el que esta corriendo esto dentro de un docker. para poder inspeccionar el proyecto corriendo desde un container, se debe agregar el flag --inspect-brk=0.0.0.0 para decirle al debugger que se puede acceder a el desde otra maquina, ya que la maquina host y el container son diferentes

npx nodemon --inspect-brk=0.0.0.0  modulos/http.js 

Para EDGE seria:

edge://inspect

Woow, de haber sabido esto antes me hubiera ahorrado mucho tiempo tratando de saber que era lo que fallaba en el código

MIERDA…
Primero que nada espero que no me borren el mensaje.
Segundo que bueno ver los errores que han sucedido
durante el proceso del curso
Tercero ver los algunos de los errores que cometemos

Por favor un curso solo de como usar el debugger y técnicas para encontrar bugs

Debugger

NodeJs tiene un modo de debug integrado. Para hacer la inspección por consola que tiene Node integrada se puede ejecutar el siguiente comando.

node --inspect src/modules/http.js

/*
**Output:**
	Debugger listening on ws://127.0.0.1:9229/0d5580cb-6a3c-436c-983e-6ef417fe27ab
	For help, see: https://nodejs.org/en/docs/inspector
	Listen http in port 3000
*/

En chrome existe un inspector más avanzado que se activa de la siguiente forma:

chrome://inspect

Esto permite abrir el inspector para poder acceder a las funciones y procesos que se están ejecutando.

Si a alguien le pasa que no puede ver la opción de inspector en el navegador, tal como muestro aquí:

…posiblemente sea porque ejecutaron el comando de la siguiente manera:

nodemon modulos/http.js --inspect

Así que lo que se debe hacer es ejecutarlo de esta otra forma:

nodemon --inspect modulos/http.js

…me quebré la cabeza un buen rato para encontrarle solución al tema 😄

Pueden usar el javascript debugger terminal de vscode, como alternativa a esto

Funciona para WSL: “También tuve ese problema, lo solucione así : verificar que en Discover network targets este el puerto localhost:9229, luego en vez de dar click en inspect como lo hace el profesor, hacer click en open dedicated DevTools for Node, luego en Sources en la pestaña de Node agregar la carpeta del proyecto y listo, puedes poner los puntos y hacer el llamado a la API”. Respuesta de comentario hecho por Carlos Mario Benites. A mi me funciono para el WSL

Para acceder al inspector solo tiene que abrir chrome en la siguiente url: chrome://inspect/#devices
ademas puedes incorporar tus archivos en en sources.

Tengo problemas para agregar carpeta al workspace en chrome, estoy usando WSL. Cuando agreggo una carpeta al workspace me sale con la ruta de windows c:/xx, y por eso no me funcionan los breakpoints(ademas de que el archivo no tiene ese punto verde), alguien sabe que se hace en este caso??

Creo que es más fácil añadir el debugger en el mismo código, al momento de ejecutarse lo haría tal cual se explica en este video.

Muy importante tener en cuenta

const http = require('http');

http.createServer(router).listen(3000);

function router(req, res) {
    console.log('nueva peticion!');
    console.log(req.url);

    switch (req.url) {
        case '/hola':
            let saludo = hola();
            res.write(saludo);
            res.end();
            break;
        default:
            res.write('Error 404. No se lo que quieres');
            res.end();
            break;

    }
    // Header
    /* res.writeHead(201, { 'Content-Type': 'text/plain' });

    // Escribir respuesta al usuario
    res.write("Hola, ya se usar HTTP de NodeJS");

    res.end(); */
}

function hola() {
    return 'Hola, que tal?';
}

console.log("Esuchando http en el puerto 3000");

Qué diferencias hay con abrir la consola del navegador con inspeccionar y ver estar herramientas?

También cabe mencionar que si tú escribes sobre el archivo en la ventana de sources, se modificará el archivo en tu PC también.

Año 2023, node versión 18

En este vídeo también explican cómo hacer debugg en Visual Studio code y en su navegador web con Python y JS:

Aprende a debuggear en Visual Studio Code y en tu Navegador Web para Python y JavaScript

Tengo una pregunta, si estoy usando Windows Subsystem for Linux (WSL) en Windows, como podría hacer para añadir a sources la carpeta en la que estoy trabajando, ya que se encuentra en una ruta que está dentro de WSL : /mnt/d/proyectos/platzi/escuela-de-js/fundamentos-nodejs/modulos
???

hay un muy buen curso de debugger en platzi, se los recomiendo

Para abrir el debugger tambien me funciono abrir el inspector y a un lado de elements, esta el icono de Nodejs

Debugger es útil para encontrar problemas en nuestro código.

Good explication! 😃

Me gusta mucho debugear el código, da una tremenda claridad en el proceso que se está ejecutando. Aparte podemos ver las variables, que función se está ejecutando y como es su flujo etc… Simplemente facilita muchas cosas.

AYUDAAA, no pude agregar el WorkSpace, directamente no hace nada cuando quiero agregar la carpeta, alguna solucion? saludos!.

Esto es muy bueno, es muy similar a lo que acostumbro hacer cuando hago debugger de sistemas embebidos electrónicos, es muy útil y detallado.

¿Alguien sabe como depurar aplicaciones NODE que se ejecutan desde WSL? Es natural que al profesor le funcione ya que está utilizando una mac y por ende el directorio raíz entre linux y macos es similar, esto no sucede en windows, el directorio raíz sería D:/usuario/proyecto/server.js

en linux o mac sería: /home/usuario/server.js-
en mi caso, con respecto a WSL, mi proyecto se encuentra en /mnt/d/usuario/proyecto/server.js
Si alguien sabe la respuesta por favor comentarla

Debugger es lo mismo que TDD, son diferentes o cual hace parte de cual?

alguien sabe si funciona con nodemon?

espectacular!!!. Esto va mas alla, de hacer inspeccion a nuestra pagina. 😃

thanks

¡Gracias por explicar el debugger, me ha ayudado muchisimo!!! ¡Eres muy bueno explicando Carlos Hernández!!!

VS Code también tiene un debugger que a mí me ha funcionado bastante bien, pero es muy interesante este método 😄

node --inspect file.js

Debugger
Importante utilizar el debugger para tratar de encontrar la mayor cantidad de errores dentro y solucionarlos antes de cualquier cosa.
node > –inspect < filename

Importante:
req es un objeto request

ame esta clase.

Debugger

Esta clase fue genial muchas gracias 😄 se aprende mucho

Hola mi archivo no se pone en verde en dev tools ?? y lo tengo abierto en chrome …

Espectacular!!

cuando abro chrome://inspect no se me conecta con el localhost:3000, y por ende no soy capaz de hacer el debugging como lo hace el profe. Alguien sabe cual puede ser el error?

lo nuevo que aprendi fue lo del watch

node --inspect ruta
permite ubicar flag

debbuger desde el server wooou!! cuanto mas por aprender!

Que gran clase!!!

Buena información, y realmente bastante para mi cerebro 😣

Alerta de spoiler, la mejor clase de este curso! 😃

Añadir carpeta a 'sources'

Wooo Excelente clase, de verdad que debugger es de los más importante en cualquier lenguaje!

Este un tema que es muy util pero no puedo ver nada.
quiero usar inspect en un programa que tengo que modificar, por favor alguien que me ayude.

1. normalmente corre con el siguiente comando
   node run start:dev
   ahora coloque
   node --inspect run start :dev
   pero nada en la imagen les muestro lo que sale.
   por si acaso les mando la seccion de script del package.json
   "scripts": {
   “lint”: “eslint ./app//*.js",
   “rm-dist”: “node_modules/.bin/rimraf ./dist”,
   “create-dist”: “mkdir dist”,
   “clean”: “npm run rm-dist && npm run create-dist”,
   “start”: “node server.js”,
   “start:dev”: “nodemon server.js --exec babel-node”,
   “prebuild”: “npm run clean”,
   “build”: "babel -d ./dist ./server.js ./app//.js ./config/.js ./config/**/*.js”,
   “test:unit”: “mocha --compilers js:babel-register --plugins add-module-exports ./test/unit.test/”
   },
   Gracias
   
   

Genial

yo debuggeaba con Visual Studio Code.

Interesante herramienta, ¡Muchas gracias!

Me gusto esta clase de Debugger

=)