Ya hay un curso de esta herramienta de Debugging: https://platzi.com/clases/devtools/
Bienvenida
Todo lo que aprenderás sobre closure y scope
Scope
Qué es el Scope y cómo funciona el Global Scope
Local Scope
Function Scope
Block Scope
Closure
¿Qué es un closure?
Ámbito léxico en closures
Cómo crear variables privadas con closures
Loops
Hoisting
¿Qué es el hoisting?
Debugging
Debugging
Cierre
Conclusiones
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 66
Preguntas 10
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.
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.