No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
19H
4M
39S

Debugging JS con DevTools

13/22
Recursos

Aportes 31

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 馃憖

Muy interesante, pues a simple vista se ve que error es porque los dos valores est谩n en String, al 鈥渟umar鈥 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 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

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

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.

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! 馃槣

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 鈥淒ebugging鈥 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

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.

<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 鈥渆scuchando鈥.

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 馃榿馃檶

馃憣

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 馃槀