Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Reproduciendo y reparando un bug

14/22
Recursos

Aportes 30

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

para hacer debuggin podemos ir a la siguiente ventana.

vemos que tenemos una sección de Event Listener Breakpoints ahí podemos captura eventos en especifico de nuestra pagina web y una ves que suceda el evento que seleccionamos nos posicione en que parte del código sucede y a partir de ahí pode debuggear.

DEBUGGING JS

  • En javascript typeof retorna el tipo de dato que tiene una variable.
  • El panel Scope te muestra las variables locales y globales actualmente definidas, junto con el valor de cada variable.

Otra forma de hace la coerción expplícita de un String a Número es usar la función Number() y pasar la variable dentro de los paréntesis.

Coerción explicita
Es la forma en que nosotros obligamos a que un valor de un tipo cambie a otro valor de otro tipo, si necesitamos que ese valor sea de un tipo distinto.
4 + "7"; // 47 (string, porque JS hace la concatenación con elímbolo de +)
4 * "7" // 28 (Número, porque no se realiza ninguna concatenación)
2 + true; // 3 (porque, true equivale a un valor de 1) 
2 + false; // 2 (al contrario de true, false equicale a un valor de 0)

¿Cómo hacemos la coerción explícita?

var a = 20;
var b = a + "";
//typeof b --> sería un string
var c = String(a);
//typeof c --> sería un string
var d = Number(c);
//typeof d --> sería un número

Tengo que practicar mucho para poder acostumbrarme a usarlo

Con Angular:

Para los que usan vscode, acá dejo un artículo que nos muestra una extensión oficial (creada por Microsoft), para instalar Debugger for Chrome, para implementar mucha de la funcionalidad del browser dentro de nuestro editor de texto.

Debugger for Chrome

Otra forma de crear breakpoints desde JavaScript (Ya directamente desde tu editor de texto) es usando la palabra reservada debugger el cual muchos profesores usan en algunos otros cursos, de igual manera se esta´ra generando un breakpoint cuando se llegue a dicha linea ^^

A mi parecer sería mucho mejor colocar el parseInt en lo que retorna la función getNumber1 y getNumber2, pero aún así muy entendible!

Yo retornaría el valor como un numero, ya que si lo quiero usar muchas veces tendría que estar haciendo un parseInt por cada vez.

Si por alguna razón al capturar el evento no los envia al archivo JS que estaba debuggeando el profesor, es posiblemente alguna extensión de chrome que se ejecute con el mismo evento click y te envía a los archivos de la extensión. desactívalas mientras estas debuggeando.

A lo que se refería el profesor como **coerción ** es conversión, ya que la primera la realiza Javascript de forma implícita, y cuando se hace de forma explícita se le llama conversión.

Fuente: MDN Web Docs

A seguir aprendiendo

Creo que esto es una de las cosas que busca evitar TypeScript con su tipado estatico 😅

Escelente clase 😄

Excelente clase, y explicación detallada del debugging JavaScript con DevTools.

Si lo e estado usando pero de una diferente manera, pero aun así genial.✔✌

Alguien sabe si esto funciona en React con los distintos componentes?

gracias, muy buenos nuevo conocimientos adquiridos

Es adicional al uso de DevTools. Con los operadores +, - antes de la cadena (sin espacio) también podemos hacer cohersión explicita a tipo number.

// Cohersión explicita string a number
const val = "20";
const positive = +val; // 20
const negative = -val; // -20

que loco esto si esta rudo

Typeof muestra el tipo de la variable

Esta clase me aclaro varias dudas.

typeof variable retorna el tipo de esa variable

También podemos pausar el codigo con la palabra clave debugger sin tener que poner un listener

<h3>14. Reproduciendo y reparando un bug</h3>

0:41 Continuando el debugging de la clase anterior.

5:54 Generando un breakpoint desde la línea manualmente.

Complementando a lo que mencionó Diego, un ejemplo podría ser que queremos depurar un problema relacionado a un evento, por ejemplo: el clic del mouse. Queremos que nuestro código se detenga cada vez que ocurra ese evento. Simple, usando DevTools esto es pan comido:

Tiene shortcuts, en mi caso oprimiendo F11 va avanzando paso a paso por cada linea del código y me ayuda a ir visualizando como progresa con solo apretar un botón del teclado. Los demás controles también tienen una tecla asiganda como F8 que corre el código hasta el siguiente breakpoint o al final del proceso.

Alguna vez hice un video en donde explicaba aunque de manera superficial el tema de coercion, se los comparto aqui. Me ayudó a entender como era que javascript se comportaba con los tipos de variables y como podia convertirlos para evitar esos inconvenientes con los strings.

Increíble clase!
Ya entrare a Js y me estoy llevando mucho contenido de valor no solo para HTML y CSS si no también en Js y realmente ya quiero empezar a darle funcionalidad a las webs que voy creando 😄