Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Debugging

11/12
Recursos

Aportes 66

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Ya hay un curso de esta herramienta de Debugging: https://platzi.com/clases/devtools/

Herramientas modernas para debuggear…

Yo:

console.log(menu)
console.log(menu.firstChild)
console.log(e)
console.log(e.toElement)

Visual Studio Code también tiene la funcionalidad de hacer Debugging: En la sección: Run dice: “Run and Debug” y al añadir el debugger para y muestra la información como Google.

Nada le gana al poderosísimo console.log para debugging jajaja, no en serio, siempre que puedan usen debugger, les será de mucha ayuda ^^

Punto para el profe. Me gustó muchísimo esta clase. Aprendí más sobre las herramientas que nos da Google.

Piensen en el debugger como un boton de pausa en el flujo del codigo, si ponemos los puntos de pausa en los lugares correctos podemos estar viendo que valores estan trayendo los parametros, s estan siendo modificados o no, para brindarnos la seguridad de que el flujo de codigo que estamos construyendo sea el correcto

const moneyBox =()=>{              
   debugger // no hay ningun valor definido porque aun no se ha hecho nada
    var saveCoins = 0;
    const countCoins=(coins)=>{                                 
  debugger// paso por paso ira saltando para saber cual es el valor coins en parameto que le va llegando y cuanto guardara saveCoins
    saveCoins += coins;
    console.log(`MoneyBox:${saveCoins}`);
   }
   return countCoins;
}
let myMoneyBox = moneyBox();

myMoneyBox(4);
myMoneyBox(6);
myMoneyBox(10);

Excelente!!

var a = 'Hello';

function hello () {
    let b = 'Hello world';
    const c = 'Hello world!!';
    if (true) {
        let d = '¡¡Hello world!!';
        debugger;
    }
}

hello();

En lo personal me gustan mas las herramientas de desarrollo de Firefox, pero ya es cuestión de lo que mas se adapte a nosotros como desarrolladores.

No sabía que se podían ver los Closures en devtools 😮

Como ya muchos sabrán el VSCode tiene incorporadas herramientas de debugging para un gran número de lenguajes de programación (por eso entre otras tantas cosas es famoso y muy usado este editor).
Lo que hay que hacer para configurarlo es bastante sencillo.

  1. Crear un archivo launch.json con la configuración deseada para el debug de nuestro archivo *.js. Ejemplo:

    Aunque el mismo VSCode tambien nos ayuda a crearlo automaticamente si lo deseamos.
  2. Colocar los puntos de debugging e iniciar el debug. (personalmente prefiero estos breakpoints en vez de escribir en el codigo la palabra debugging por razones de limpieza del código, ya que hay veces que se olvida quitar esas palabras despues). Ejemplo:

Adicional a las Chrome devtools, VS Code tiene una erramienta para debugging que sirve para distintos lenguajes, al inicializar el proyecto de node con el comando npm init y crear un archivo package.json podemos utilizarlo con el botón de “play” y el bichito en la barra de actividades del editor de código (el de la izquierda". Para esta clase y algunas ocasiones me parece más sencillo y te ahorras el copiar y pegar.
Aquí mas info: https://code.visualstudio.com/docs/editor/debugging

Me sirvió muchísimo hacer el debugging del closure para terminar de comprender cómo funciona, si lees esto y entendiste a las malas el concepto en videos anteriores te recomiendo que hagas lo mismo

Admítelo. Hoy aprendiste sobre debugger, mañana vas a seguir usando console.log

El mejor debugger es:

console.log()

Aunque en la ruta de Desarrollo web está el curso de debugging creo que en cada clase se debió hacer lo que Óscar muestra con los devtools, ya que se hubieran entendido línea a línea los conceptos como los loops o los closures

Si quieren aprender más sobre Chrome Dev Tools chequeen esto: https://developers.google.com/web/tools/chrome-devtools

Nuevo super poder desbloqueado: debugger

La palabra debbuger se coloca donde sea necesario para interrumpir la ejecucion y ver los valores de flujo en el codigo

Debugging nos va a permitir colocar breakpoints para entender cómo se ejecuta el cṕdoigo

¡Qué buena Clase!!!

Para los que se preguntan cómo insertar una linea desde la consola. No es solo con la tecla ENTER, sino con Shift+ENTER

y se puede hacer con edge y firefox??

Woow, este video me aclaro los conceptos, debería este video estar arriba cuando explicaron closures.

Una de las herramientas más valiosas que tenemos como desarrolladores son las DevTools, estas funcionan tanto en Chrome, Edge y Firefox, estas herramientas nos permiten hacer debugging, que en pocas palabras es buscar aquellos errores en nuestro código para corregirlos y saber como está ejecutandose nuestro código. Para este ejemplo usaremos Chrome DevTools (funciona en Edge igual)

  • Primer Ejemplo

    Primero, crearemos una función que sirva como ejemplo, en esta inicializamos el scope global, creamos el scope de función y de bloque, y luego la mandamos a llamar. Pero tenemos algo nuevo, la palabra reservada debugger nos permite que cuando lo ejecutemos en la consola podamos pausar el código justo en ese momento que se manda a llamar y poder hacer el debug hasta ese entonces.

    var a = "Hello";
    
    function hello() {
      let b = "Hello World";
      const c = "Hello World!";
      if (true) {
        let d = "Hello World!!";
        debugger;
    	//cuando llega a este punto el código se detiene y empieza el debugging
      }
    }
    
    hello();
    

    Por ejemplo, al ejecutar este código en la consola el navegador correrá todo el código hasta después de la variable d que es antes de la palabra debugger, y creará una interfaz donde podremos ver como se ha ejecutado el código hasta ese entonces.

    Como vemos, el código se pausa cuando llega a debugger (la línea verde) y guarda en la memoria los datos que tenemos hasta entonces. Podemos ver abajo en el cuadro de Scope que en el Scope Block tenemos la variable d, las variables del Scope Local y las del Global (que está la variable a), así mismo el navegador reconoce que estamos llamando a la función hello() y que estamos en ella.

  • Segundo Ejemplo

    Ahora veremos un ejemplo con un closure donde entenderemos el funcionamiento del código con estas herramientas. Vamos a colocar el siguiente código en la consola del navegador.

    const moneyBox = () => {
      debugger;
      let saveCoins = 0;
      const countCoins = (coins) => {
        debugger;
        saveCoins += coins;
        console.log(`Money box: $${saveCoins}`);
      };
      return countCoins;
    };
    
    let myMoneyBox = moneyBox();
    
    myMoneyBox(10);
    myMoneyBox(20);
    

    Al ejecutarlo la primera vez, pausará el código en la primera línea de debugger, y en el Scope nos muestra que las variables dentro de esta función aún no están definidas. Ya que aún no ha recibido ningún valor, para continuar con la ejecución del código le daremos al botón azul del cuadro amarillo de la izquierda.

    Ahora, nos encontramos en que nuestra función anidada ya recibió el valor de 10 en el parámetro coins, pero aún donde estamos no lo ha asignado a la variable saveCoins, que tiene un valor de 0. Cuando este código termine de ejecutarse, la variable saveCoins tendrá el valor de 10.

    Presionamos el botón de continuar ejecución nuevamente y ahora nos muestra en su segunda ejecución que la variable saveCoins ya tiene el valor de 10 y la función countCoins recibió el argumento 20 en el parámetro coins, por lo tanto cuando termine de correr el código se sumará el valor de saveCoins + coins que sería igual a 30. Y nuestro código funciona perfectamente.


En nuestros ejemplos los códigos funcionan perfectamente, y vemos cómo funciona paso a paso con esta herramienta, pero también nos sirve debuggear con DevTools cuando algo en nuestro código falla y queremos ver que pasó sin tanta complicación.

Excelente herramienta y lo mejor es que ya tiene un curso Platzi, para aprender a manejarla 😃

Es una excelente herramienta, si sabes usarla y entenderla jaja, si no está un poco complicado.

Muy recomendado el curso de Debuggin con Chrome Dev Tools, usarlo te da un entendimiento muy superior del callstack y todo lo que corre JS por debajo

Esta herramienta la aprendí a usar en el curso de Fundamentos de Javascript

Conocía la herramienta y había manejado el debugger pero no había utilizado ni habñia visto la pestaña de scope y sources que genial Oscar esto va a ser de gran ayuda, tal vez no las había visto porque no manejaba muy bien el concepto y no les ponía atención. Gracias de nuevo la mejor clase aunque todas están fantásticas. 😄

Podemos ver de una forma distinta gracias a Chrome con las Chrome Dev Tools. Si en nuestro programa queremos pausar nuestro codigo en una parte, podemos usar la palabra reservada “debugger”.

Al ejecutar un programa con este programa, Chrome entra al debugger gracias a nuestra declaracion y podemos ver todo lo que esta pasando, el Scope de nuestras variables, la globales . Tambien podemos ver la Call Stack, nuestras asignaciones, agregar breakpoints para saber que esta pasando en cualquier linea de codigo.

const moniboxClousures = () =>{

let saveCoind = 0;


const money = (coins) => {
  
    saveCoind += coins;

console.log(`wallet ${saveCoind}`);

}

return money;

};

let moneyBox = moniboxClousures();

moneyBox(4);
moneyBox(6);
moneyBox(10);

La mejor clase para entender los conceptos vistos en el curso.
Scope
Closure
Hoisting.

Como unos checkpoints en el código. Genial.

En cada curso aprendo algo nuevo acerca de las Dev Tools de los navegadores 🤯

excelente herramienta para encontrar errores!

CALL STACK???
Por qué explica por la mitad?
No explicó cómo usar el debugging, para mirar eso solamente pongo la consola. Expliquen!!

recomiendo el curso de Diego De Granda acerca de JavaScript

clase larga

Codigo del curso de hoy

var a = 'Hello';

function hello() {
    let b = 'Hello World';
    const c = 'Hello World!';
    if(true){
        let d = 'Hello World!!'
        debugger
    }
}

hello();
const moneyBox = () => {
    debugger
    var saveCoins = 0;
    const countCoins = (coins) =>{
        debugger
        saveCoins += coins;
        console.log(`MoneyBox: $${saveCoins}`);
    }
    return countCoins
}

let myMoneyBox = moneyBox();

myMoneyBox(4);
myMoneyBox(6);

Muy buena clase sin dudas esta herramienta del debbuger es necesaria para saber como actúa nuestro código

Excelente herramienta ayuda bastante a comprender como funciona el código

Es una buena manera de visualizar el scope, genial.

También se puede hacer directamente usando breakpoints en el dev tools de chrome y usar f5 para recargar la página y poder usar los breakspoints. 🎇

Ya había utilizado el debug de chrome y buscaba en el código y ponía manualmente los puntos de interrupción, como dato adicional cuando el código está detenido pasas el cursor por encima de una variable te muestra el valor actual.

Fantástico, que buen uso el que podemos dar al navegador con las dev tools. 👨🏻‍💻

gran aporte, muchas veces necesitamos conocer hasta donde esta funcionando nuestro codigo, y ahora sabemos como

como le hizo para darle enter y escribir debugger sin que se ejecutara el còdigo?

Excelente stoker!

Esta demostración final hubiera estado muy bien en la clase de la alcancía. Aun así, ya ha quedado todo más claro y muy buen curso profe Orlando Naipes 👋🏻

Aca les dejo una pagina que es una consola para hacer pruebas… https://jsconsole.com/

al …

Gran Clase, muy buena la explicación e la herramienta.

que buena herramienta, para entender como el closure va guardando los valores en cada ejecución.

que buena herramienta debugger

Chicos Google tiene el curso completo de DevTools
busquenlo en google dev

Excelente!

Chrome dev tool para hacer debugging

Crhome devtools nos permite ver los scope de la variable, Waaoo!

por que la variable declarada con “var” no aparece en el ambito global dentro del debugger?

Una herramienta super util. Nos ayuda a resolver cualquier problema, analizando detenidamente el código.

Excelente la consola de chrome!!!

No sabia de ésta herramienta. Muy bueno

Cosas a recordar: el clousure recuerda el contexto donde fue creado.

Angel

Hacer el curso de Chrome Dev Tools es lo mejor.

¡Gran clase!

f