No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Debugging JS con DevTools

13/22
Recursos

Aportes 28

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

Definitvamente este curso vale Oro, Genial

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

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 👀

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.

Like si viste el problema haha

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.

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 😃

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

Esto serviria para debuggear una aplicacion con react?

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

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

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.

parse…🤫

<h3>13. Debugging JS con DevTools</h3>

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

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

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

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! 😜

👌

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 😂