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