A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Debugger

27/31
Recursos

Aportes 55

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

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: 鈥淭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

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

鈥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 馃槃

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": {
    鈥渓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!

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

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

=)