Supervisar la ejecución de JavaScript
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Realizar un seguimiento de las variables de JavaScript.
- Manipular las variables de JavaScript.
Si ya sabe cómo solucionar problemas en JavaScript, es probable que conozca el comando console.log()
. Es como si fuera su amigo interior que le dice qué sucede mientras se ejecuta JavaScript. Muestra qué hacen las variables en diferentes estados en la secuencia de comandos. ¿Qué tal si le dijera que hay una forma más rápida y ordenada de obtener esa información, un amigo aún mejor? Ese amigo nuevo es DevTools Watch. Analicemos esto.
Siga el proceso con Trail Together
¿Desea seguir el proceso con expertos a medida que realiza este paso? Eche un vistazo a este video, parte de la serie Trail Together en Trailhead Live.
(Este video comienza en el minuto 39:54, en caso de que desee rebobinar y mirar el comienzo del paso nuevamente).
Usar la función Watch
Ahora sabe cómo establecer los puntos de interrupción, y ver el flujo del código y los valores de las variables. Sin embargo, existe una mejor manera de supervisar esas variables y sus valores en ciertos momentos durante la ejecución de código. Utilice Watch en el panel de depuración de JavaScript.
Hacer que la aplicación Solutions cuente de a dos
Ya observó que la aplicación Solutions suma uno al conteo cada vez que hace clic en +1. Ahora, puede utilizar la opción de control para hacer que el conteo aumente de dos en dos.
- Actualice la página en el navegador. Los puntos de interrupción deben seguir apareciendo.
- Si no está abierto el comando display.js en DevTools, ábralo.
- Busque la función
handleAugmentorChange(event)
.
- En el panel de depuración de JavaScript, expanda Watch y haga clic en Add watch expression (Agregar expresión de Watch)
.
- Ingrese
event.target.value
y presione Intro.
Watch muestra lo siguiente:event.target.value:<not available>
(no disponible)
Definamos un punto de interrupción y activemos el evento.
- Haga clic en el número de línea para
this.augmentor = event.target.value;
a fin de establecer un punto de interrupción.
- En la aplicación Solutions, en la opción de control, seleccione 2. Watch ahora muestra que el valor de event.target.value es “2”.
Como estamos en el controlador de eventos handleAugmentorChange,event.target.value
está activo y Watch muestra su valor.
- En el panel de depuración de JavaScript, agregue
this.augmentor
a Watch.
Observe que el valor dethis.augmentor
sigue siendo 1. Esta línea de código aún no se ejecutó.
- Haga clic en Step over (Pasar por encima)
para ejecutar esta línea y pasar a la siguiente.
Ahora la ejecución se pausó después de la línea con el punto de interrupción y Watch muestra lo siguiente:event.target.value:"2"
this.augmentor:"2"
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. Tenga en cuenta que los botones de controles de la aplicación Solutions cambiaron a -2 y +2.
Observar el conteo de dos en dos de Solutions
En la aplicación Solutions, en Display (Mostrar), el conteo es cero actualmente. Observe cómo cambian las variables en el código cuando hace clic en el botón +2 de la aplicación Solutions.
- Haga clic en +2. El punto de interrupción pausa la ejecución de código en la primera línea de la función
handleIncrement
.
Ahora Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
- Agregue
operand
ythis.counter
a Watch. Eloperand
se muestra <not available> (no disponible) ythis.counter
es cero.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:0
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
.
Espere… El siguiente punto de interrupción no se pausó, así que pudimos ver el cambio en el valor del operando. En la aplicación Solutions, el conteo ahora muestra 2. Vamos de nuevo. Esta vez debería pausarse.
- Haga clic en +2.
Watch ahora muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"02"
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. Cuando la secuencia de comandos se vuelve a pausar,
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:"2"
this.counter:"02"
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. ¡Lo consiguió! Pero... Observe el valor del conteo en la aplicación Solutions.
¿Por qué es 22 en lugar de 4? Parece que la aplicación Solutions está concatenando texto en lugar de agregar números. Aquí es donde Watch se pone interesante.
Watch supervisa las expresiones y las propiedades
Revisemos el tipo de datos de la variable que el botón +2 cambia.
- Agregue
typeof operand
a Watch. El valor detypeof operand
no está definido.
- Haga clic en +2.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:<not available>
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:"string"
¡Ahí está! La variable del operando está definida como una cadena.
Aquí ve la potencia que Watch aporta en la solución de problemas. A continuación, identifiquemos el problema y busquemos una manera de corregirlo.
Consola
Para investigar un poco más este problema, recomendamos usar la consola de DevTools.
- Actualice la página en el navegador. Los puntos de interrupción y los elementos de Watch deben seguir apareciendo.
- En la aplicación Solutions, haga clic en +1.
- En Watch, revise los valores de
this.augmentor
ythis.counter
.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
Tantothis.counter
comothis.augmentor
parecen ser números, pero vamos a confirmarlo.
- Agregue
typeof this.counter
ytypeof this.augmentor
en Watch.
Efectivamente, Watch muestra que son números.event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
typeof this.counter:"number"
typeof this.augmentor:"number"
- Haga clic en Step over (Pasar por encima)
para pasar a la siguiente línea.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:1
operand:1
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
Todos números. Hasta ahora, todo bien.
- Haga clic en Step over (Pasar por encima)
para pasar a la siguiente línea.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
Bueno, this.counter
cambió de 0 a 1. Hagámoslo otra vez para ver qué pasa.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. En la aplicación Solutions, el conteo es 1.
- En la aplicación Solutions, haga clic en +1.
- Examine el código línea por línea y observe que los números todavía son números y
this.counter
ahora es 2, como debe ser.
Todo parece estar funcionando según lo esperado.
Usar la opción de control y ver qué sucede en el valor
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. En la aplicación Solutions, el conteo ahora es 2.
- En la aplicación Solutions, en la opción de control, seleccione 2. La secuencia de comandos se ejecuta hasta que llega al punto de interrupción en la función handleAugmentorChange.
La secuencia de comandos se pone en pausa en la función, pero la línea de código del punto de interrupción aún no se ejecutó. Observe queevent.target.value
parece una cadena.
- Agregue
typeof event.target.value
a Watch.event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"string"
Efectivamente, es una cadena. Esto confirma que la aplicación Solutions está concatenando texto donde debería agregar números.
Usemos la consola para manipular valores y ver qué sucede.
- Haga clic en la ficha Console (Consola).
- En la consola, ingrese
event.target.value
y, luego, presione Intro.
La consola devuelve el valor‘2’
. Observe las comillas alrededor del 2 para indicar una cadena. Como todavía está pausado en el punto de interrupción, puede usar las variables en su estado actual.
- Introduzca
this.augmentor = event.target.value
y luego pulse Intro. Nuevamente, la consola devuelve‘2’
. Eso no es lo que debería ser. De alguna manera, el código cambió this.augmentor de un número a una cadena. Veamos si podemos encontrar una solución.
- Ingrese
this.augmentor = 1
y después pulse Intro para volver a cambiarlo a un número.
- Introduzca
this.augmentor = parseInt(event.target.value)
y después pulse Intro. El valor cambia a2
y permanece un número. Así que ahora sabemos cómo arreglar el código.
- Introduzca
this.augmentor = 1
para restaurar el valor original.
- Regrese al panel Sources (Fuentes).
- Haga clic en Step over (Pasar por encima)
para pasar a la siguiente línea y verifique el valor de
this.augmentor
.
Watch muestra lo siguiente:event.target.value:"2"
this.augmentor:"2"
operand:<not available>
this.counter:2
typeof operand:"undefined"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"string"
Es una cadena.
Pausar esta unidad
Desplácese hasta el final de esta unidad y complete el reto práctico. Cuando termine de comprobar el reto, regrese aquí para navegar por la solución en su Trailhead Playground.
Reanudar esta unidad
Ahora confirmemos que la aplicación Solutions se comporta según lo esperado.
- Actualice la página en el navegador.
- En la aplicación Solutions, en la opción de control, seleccione 2. La secuencia de comandos se ejecuta hasta que alcanza el punto de interrupción en la función handleAugmentorChange.
- Haga clic en Step over (Pasar por encima)
para pasar a la siguiente línea.
- Verifique el valor de this.augmentor.
Sigue siendo un número. Excelente.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
.
- En la aplicación Solutions, haga clic en +2.
- Haga clic en Step over (Pasar por encima)
para pasar a la siguiente línea.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:2
operand:2
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"undefined"
- Haga clic en Step over (Pasar por encima)
.
Watch muestra lo siguiente:event.target.value:undefined
this.augmentor:2
operand:2
this.counter:2
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"undefined"
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. En la aplicación Solutions, el conteo es 2.
- En la aplicación Solutions, haga clic en +2.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. La secuencia de comandos se ejecuta hasta que alcanza el punto de interrupción condicional y después se pone en pausa. Observe que this.counter sigue siendo 2.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
y observe que el conteo en la aplicación Solutions es 4, como debería ser. ¡Tachán!
Entonces, ¿qué le parece su nuevo mejor amigo DevTools? En este módulo, solo se aborda una pequeña parte de cómo DevTools puede ayudar a solucionar problemas en los componentes web Lightning. Asegúrese de revisar los recursos para obtener más ideas.
Recursos
- Chrome DevTools: Referencia sobre depuración de JavaScript
- Chrome DevTools: Pausar el código con puntos de interrupción
- Blog para desarrolladores de Salesforce: Desarrollar las habilidades de LWC - Parte 2