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 está acostumbrado a solucionar problemas de JavaScript, es probable que conozca el comando console.log()
. Es su amigo de confianza que le indica lo que ocurre mientras se ejecuta el código JavaScript. Además, permite ver lo que hacen las variables en distintos estados del script. ¿Qué pasa si le digo que hay una manera más rápida y limpia de obtener esa información, un amigo incluso mejor? La función Watch (Supervisión) de DevTools es ese nuevo amigo. Vamos a verlo.
Siga el proceso con Trail Together
¿Desea seguir el proceso con expertos a medida que realiza este paso? Eche un vistazo a este vídeo, parte de la serie Trail Together en Trailhead Live.
(Este vídeo comienza en el minuto 39:54, en caso de que desee rebobinar y volver a ver el principio del paso).
Usar la función Watch (Supervisión)
Ahora ya sabe cómo definir puntos de interrupción y ver el flujo del código y los valores de las variables. Pero hay una forma mejor de supervisar esas variables y sus valores en determinados momentos de la ejecución del código. Puede usar la función Watch (Supervisión) del panel de depuración de JavaScript.
Hacer que la aplicación Solutions cuente de dos en dos
Ha visto cómo la aplicación Solutions suma uno al recuento cada vez que se hace clic en +1. Ahora, puede usar Control Option (Opción de control) para hacer que cuente de dos en dos.
- Actualice la página en el navegador. Los puntos de interrupción deben seguir apareciendo.
- Si todavía no está abierto, abra el archivo display.js en DevTools.
- Busque la función
handleAugmentorChange(event)
.
- En el panel de depuración de JavaScript, expanda Watch (Supervisión) y haga clic en Add watch expression (Agregar expresión de supervisión,
).
- Escriba
event.target.value
y pulse Intro.
Vemos lo siguiente en Watch (Supervisión):event.target.value:<not available>
Vamos a definir un punto de interrupción y activar el evento.
- Haga clic en el número de línea de
this.augmentor = event.target.value;
para definir un punto de interrupción.
- En la aplicación Solutions, en Control Option (Opción de control), seleccione 2. Ahora vemos en Watch (Supervisión) que el valor de event.target.value es "2".
Puesto que nos hemos detenido en el controlador de eventos handleAugmentorChange,event.target.value
está activo y vemos su valor en Watch (Supervisión).
- En el panel de depuración de JavaScript, agregue
this.augmentor
a Watch (Supervisión).
Observe que el valor dethis.augmentor
sigue siendo 1. Esta línea de código aún no se ha ejecutado.
- Haga clic en Step over (Pasar,
) para ejecutar esta línea y pasar a la siguiente.
La ejecución se ha detenido después de la línea con el punto de interrupción y la sección Watch (Supervisión) muestra lo siguiente:event.target.value:"2"
this.augmentor:"2"
- Haga clic en Resume script execution (Reanudar ejecución del script),
. Observe que los botones Controls (Controles) de la aplicación Solutions han cambiado a -2 y +2.
Supervisar cómo la aplicación Solutions cuenta de dos en dos
En la aplicación Solutions, en Display (Visualización), Count (Recuento) tiene un valor de 0. 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. Con el punto de interrupción se pone en pausa la ejecución del código en la primera línea de la función
handleIncrement
.
Ahora vemos en Watch (Supervisión) lo siguiente:event.target.value:undefined
this.augmentor:"2"
- Agregue
operand
ythis.counter
en Watch (Supervisión).operand
muestra el valor <not available (no disponible)> ythis.counter
tiene un valor de cero.
En Watch (Supervisión) vemos lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:0
- Haga clic en Resume script execution (Reanudar ejecución del script),
.
Un momento. El siguiente punto de interrupción no ha detenido la ejecución, así que hemos podido ver el cambio de valor en "operand". En la aplicación Solutions, Count (Recuento) ahora tiene un valor de 2. Vamos a intentarlo de nuevo. Ahora debería detenerse.
- Haga clic en +2.
En Watch (Supervisión) vemos ahora lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"02"
- Haga clic en Resume script execution (Reanudar ejecución del script),
. Cuando el script vuelva a detenerse,
en Watch (Supervisión) veremos lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:"2"
this.counter:"02"
- Haga clic en Resume script execution (Reanudar ejecución del script),
. ¡Lo ha conseguido! Pero fíjese en el valor de Count (Recuento) de la aplicación Solutions.
¿Por qué el recuento es 22 y no 4? Parece que la aplicación Solutions concatena el texto en lugar de agregar números. Aquí es donde la función Watch (Supervisión) se pone interesante.
La función Watch (Supervisión) supervisa expresiones y propiedades
Vamos a comprobar el tipo de datos de la variable que cambia con el botón +2.
- Agregue
typeof operand
a Watch (Supervisión) El valor detypeof operand
no está definido.
- Haga clic en +2.
En Watch (Supervisión) vemos 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 ejecución del script),
.
En Watch (Supervisión) vemos lo siguiente:event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:"string"
¡Eso es! El valor de "operand variable" está definido como una cadena (string).
Como puede comprobar, Watch (Supervisión) es una potente herramienta para solucionar problemas. A continuación, vamos a detectar el problema y buscar una forma de resolverlo.
Consola
Para seguir investigando este problema, vamos a usar la consola de DevTools.
- Actualice la página en el navegador. Los puntos de interrupción y los elementos supervisados deben seguir apareciendo.
- En la aplicación Solutions, haga clic en +1.
- En Watch (Supervisión), compruebe los valores de
this.augmentor
ythis.counter
.
En Watch (Supervisión) vemos lo siguiente:event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
Parece quethis.counter
ythis.augmentor
son números, pero vamos a confirmarlo.
- Agregue
typeof this.counter
ytypeof this.augmentor
a Watch (Supervisión).
Sí, en Watch (Supervisión) vemos que son números por la palabra "number".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,
) para pasar a la siguiente línea.
En Watch (Supervisión) vemos 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 son números. Por ahora, todo bien.
- Haga clic en Step over (Pasar,
) para pasar a la siguiente línea.
En Watch (Supervisión) vemos 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"
this.counter
ha cambiado de 0 a 1. Vamos a repetirlo y vemos qué ocurre.
- Haga clic en Resume script execution (Reanudar ejecución del script),
. En la aplicación Solutions, Count (Recuento) tiene un valor de 1.
- En la aplicación Solutions (Soluciones), haga clic en +1.
- Revise el código y fíjese que los números siguen siendo números y que
this.counter
ahora es 2, como debería ser.
Parece que todo funciona según lo previsto.
Pruebe a usar la opción de control y observe cómo se comporta el valor
- Haga clic en Resume script execution (Reanudar ejecución del script),
. En la aplicación Solutions, Count (Recuento) ahora tiene un valor de 2.
- En la aplicación Solutions, en Control Option (Opción de control), seleccione 2. El script se ejecuta hasta que llega al punto de interrupción de la función handleAugmentorChange.
El script se ha detenido dentro de la función, pero la línea de código del punto de interrupción todavía no se ha ejecutado. Observe queevent.target.value
parece una cadena.
- Agregue
typeof event.target.value
a Watch (Supervisión).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"
No hay duda de que es una cadena (string). Esto confirma que la aplicación Solutions concatena el texto en lugar de agregar números.
Vamos a usar la consola para manipular los valores y ver lo que ocurre.
- Haga clic en la ficha Console (Consola).
- En la consola, escriba
event.target.value
y pulse Intro.
La consola devuelve el valor‘2’
. Observe que las comillas indican que se trata de una cadena. Puesto que el script sigue en pausa en el punto de interrupción, puede usar las variables en su estado actual.
- Escriba
this.augmentor = event.target.value
y pulse Intro. La consola devuelve otra vez el valor‘2’
. Esto es incorrecto. Parece que el código ha cambiado el valor de this.augmentor de un número a una cadena. Veamos si encontramos una solución.
- Escriba
this.augmentor = 1
y pulse Intro para volver a cambiar el valor a un número.
- Escriba
this.augmentor = parseInt(event.target.value)
y pulse Intro. El valor cambia a2
y se queda siendo un número. Ahora ya sabemos cómo arreglar el código.
- Escriba
this.augmentor = 1
para restaurar el valor original.
- Vuelva al panel Sources (Orígenes).
- Haga clic en Step over (Pasar,
) para pasar a la siguiente línea y compruebe el valor de
this.augmentor
.
En Watch (Supervisión) vemos 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"
Se trata de una cadena.
Poner en pausa la unidad
Desplácese hasta el final de la unidad y complete el reto práctico. Cuando termine el reto, vuelva aquí para hacer un recorrido por la solución en su Trailhead Playground.
Reanudar la unidad
Es hora de confirmar que la aplicación Solutions se comporta de la manera prevista.
- Actualice la página en el navegador.
- En la aplicación Solutions, en Control Option (Opción de control), seleccione 2. El script se ejecuta hasta que llega al punto de interrupción de la función handleAugmentorChange.
- Haga clic en Step over (Pasar,
) para pasar a la siguiente línea.
- Compruebe el valor de this.augmentor.
¡Es un número! Excelente.
- Haga clic en Resume script execution (Reanudar ejecución del script),
.
- En la aplicación Solutions (Soluciones), haga clic en +2.
- Haga clic en Step over (Pasar,
) para pasar a la siguiente línea.
En Watch (Supervisión) vemos 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,
)
En Watch (Supervisión) vemos 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 ejecución del script),
. En la aplicación Solutions, Count (Recuento) tiene un valor de 2.
- En la aplicación Solutions (Soluciones), haga clic en +2.
- Haga clic en Resume script execution (Reanudar ejecución del script),
. El script se ejecuta hasta que llega al punto de interrupción condicional y se detiene. Observe que el valor de this.counter sigue siendo 2.
- Haga clic en Resume script execution (Reanudar ejecución del script,
) y fíjese en que el valor de Count (Recuento) en la aplicación Solutions es 4, como debería ser. ¡Tachán!
¿A qué le gusta su nuevo amiguito DevTools? En este módulo solo vemos por encima cómo puede ayudarle DevTools a solucionar problemas con componentes web Lightning. No olvide consultar los recursos si necesita más ideas.
Recursos
- Chrome DevTools: JavaScript Debugging Reference (Guía sobre la depuración de JavaScript)
- Chrome DevTools: Pause Your Code with Breakpoints (Poner el código en pausa con puntos de interrupción)
- Blog de desarrolladores de Salesforce: Step Up Your LWC Skills- Part 2 (Preparar sus habilidades de LWC, parte 1)