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

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)

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!

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.

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

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.

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

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

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.

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

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 

Good explication! 😃

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 😄

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.

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
???

¿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?

Para EDGE seria:

edge://inspect

alguien sabe si funciona con nodemon?

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

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

ame esta clase.

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

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!

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

Me gusto esta clase de Debugger

=)