No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Debugger

27/31
Recursos

Aportes 65

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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铆:

鈥osiblemente 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

鈥e 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: 鈥淭ambi茅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 > 鈥搃nspect < 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": {
    鈥渓int鈥: 鈥渆slint ./app//*.js",
    鈥渞m-dist鈥: 鈥渘ode_modules/.bin/rimraf ./dist鈥,
    鈥渃reate-dist鈥: 鈥渕kdir dist鈥,
    鈥渃lean鈥: 鈥渘pm run rm-dist && npm run create-dist鈥,
    鈥渟tart鈥: 鈥渘ode server.js鈥,
    鈥渟tart:dev鈥: 鈥渘odemon server.js --exec babel-node鈥,
    鈥減rebuild鈥: 鈥渘pm run clean鈥,
    鈥渂uild鈥: "babel -d ./dist ./server.js ./app/
    /.js ./config/.js ./config/**/*.js鈥,
    鈥渢est:unit鈥: 鈥渕ocha --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

Definitivamente vali贸 la pena haber tomado todos los cursos anteriores de javascript, recomiendo sobre todo el curso profesional de javascript, ayuda un monton a entender como trabaja nodejs

=)