Debugging JS con DevTools

La IU del panel Sources cuenta 3 partes fundamentales:

• Panel File Navigator. Aquí se muestran todos los archivos que solicita la página.
• Panel Code Editor. Después de seleccionar un archivo en el panel File Navigator, el contenido del archivo se muestra aquí.
• Panel JavaScript Debugging. Diversas herramientas para inspeccionar el JavaScript de la página. Si la ventana de DevTools es ancha, este panel aparece a la derecha del panel Code Editor.
  
  

By: https://cutt.ly/btDQANA

link https://googlechrome.github.io/devtools-samples/debug-js/get-started

Si aún no te has dado cuenta de cuál es el problema, puedes ver cómo DevTools también te pone qué tipo de dato es dicho valor, así que eso puede dar una pista para resolver el error 👀

Definitvamente este curso vale Oro, Genial

Muy interesante, pues a simple vista se ve que error es porque los dos valores están en String, al “sumar” dos String se están concatenando.

Falta y sería interesante aprender a identificarlo desde Chrome DevTools.

Muy interesante, desconocía por completo que se podían agregar los listener así para hacer debug

Si alguien más quiere tirar todo al caño porque no funciona el debugger, desactiven el adBlocker , actualicen y va a identificar los eventos bien.

La verdad es que con cada curso que pasa SI me siento cada vez mas profesional y por eso nunca paremos de aprender 💚

Like si viste el problema haha

Antes de este curso seguí las recomendaciones de Diego y completé en Básico de JavaScript, y si bien comprendí los conceptos sin problema, sentía que aún no completaba las piezas del rompecabezas… Esta clase lo aclaró todo!.. entender la secuencia lógica en la ejecución de JavaScript fue sublime! 😜

he notado que aunque es interesante esta herramienta su utilidad es muy limitada ,recordemos que la mayoría de proyectos están hechos bajo un framework y cuando no ,es buena practica usar webpack ,inlcuso en caso de vue ,este incluye webpack en si mismo ,dicho esto webpack optimiza el codigo y lo vuelve lenguaje ultra optimizado y sin embargo inentendible para nosotros, dicho esto invito a que busquen paginas web e inspeccionen su codigo y notaran que no es entendible o incluso cuando esten desarrollando un proyecto con frameworks , insisto es muy interesante esta herramienta pero digamos que casi se limita al area academica y no la practica 😃

Comenzar a depurar JavaScript en Chrome DevTools

Para el Debugger de Firefox, pueden revisar este Playground https://mozilladevelopers.github.io/playground/debugger para depurar una app

Súper interesante esta clase podemos dejar de usar el famoso console.log(), para saber donde hay algún problema en nuestro JavaScript, ahora es mucho mejor usar las herramientas de DevTools en Chrome, súper simple: creando breakpoints , donde el código se detiene y avanza una línea a la vez o paso a paso en su ejecución del código.

También podemos usar un debugger desde nuestro código fuente js para poder recorrer todo el proceso paso a paso

parse…🤫

Esto serviria para debuggear una aplicacion con react?

que genial la escuela de desarrollo web, todo toma tanto sentido.

Ansiaba esta clase XD

Es impresionante la forma que se usa el “Debugging” con el JS para hacer el recorrido de una funcion de una forma fail y sencilla sin tener que complicar al programador. Me hubiera encantado saber eso, cuando comence a estudiar esta parte. Pero bueno, el objetivo de un programador es buscar soluciones y en el camino aprender de estos.

Inicie este curso por este video!! era lo que necesitaba!
muy buen curso y profesor

En vez de hacer una suma estaba haciendo una concatenacion

Muy buen ejemplo para poder hacer un debug. El error es sencillo pero te deja claro el uso de las dev tools , el cual es el objetvio de este curso

De lo mejor, haciendo esto me lleva directamente a la parte en donde se debe de ajustar el código.

Así es mucho más fácil debbugear el código!

Excelente clase para debuggear código de JavaScrit, es increible lo sencillo que es revisar el código con esta herramienta.

Sencillo, pero muy práctico! (Al menos este caso)

Así es mas fácil debbugear nuestro código, ver nuestro errores y conexiones.

2:45 Activando Event Listener para escuchar el evento Click. Sources > Event Listener Breakpoints > Mouse > click. Esto lo que hace es generar un breakpoint que detiene la ejecución del código en la línea de la función asociada al evento que estamos “escuchando”.

Enlaces de la clase:
Demo: Get Started Debugging JavaScript with Chrome DevTools
Enlaces complementarios:
Comenzar a depurar JavaScript en Chrome DevTools

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

👌

El error de esta clase me recordó a mis primeros programas en java donde trataba de sumar 2 números pero el resultado se concatenaba en un String jajaj 😂