Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

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.
Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

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.

  1. Actualice la página en el navegador. Los puntos de interrupción deben seguir apareciendo.
  2. Si no está abierto el comando display.js en DevTools, ábralo.
  3. Busque la función handleAugmentorChange(event).
  4. En el panel de depuración de JavaScript, expanda Watch y haga clic en Add watch expression (Agregar expresión de Watch) “”.
  5. Ingrese event.target.value y presione Intro. event.target.value agregado
    Watch muestra lo siguiente: event.target.value:<not available> (no disponible)

Definamos un punto de interrupción y activemos el evento.

  1. Haga clic en el número de línea para this.augmentor = event.target.value; a fin de establecer un punto de interrupción.
  2. 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”. 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.
  1. En el panel de depuración de JavaScript, agregue this.augmentor a Watch. this.augmentor: se agregó 1 a Watch
    Observe que el valor de this.augmentor sigue siendo 1. Esta línea de código aún no se ejecutó.
  1. Haga clic en Step over (Pasar por encima) “” para ejecutar esta línea y pasar a la siguiente. Pantalla DevTools que corresponde a la descripción que sigue
    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"
  1. 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.
    Botones de controles de la aplicación Solutions que muestran -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.

  1. 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"
  1. Agregue operand y this.counter a Watch. El operand se muestra <not available> (no disponible) y this.counter es cero.
    Watch muestra lo siguiente:
    event.target.value:undefined
    this.augmentor:"2"
    operand:<not available>
    this.counter:0
  1. 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.
  2. Haga clic en +2.
    Watch ahora muestra lo siguiente:
    event.target.value:undefined
    this.augmentor:"2"
    operand:<not available>
    this.counter:"02"
  1. 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"
  1. 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.
    El componente Display (Mostrar) de la aplicación Solutions muestra el siguiente conteo: 22.
    ¿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.

  1. Agregue typeof operand a Watch. El valor de typeof operand no está definido.
  2. 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>
  1. 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.

  1. Actualice la página en el navegador. Los puntos de interrupción y los elementos de Watch deben seguir apareciendo.
  2. En la aplicación Solutions, haga clic en +1.
  3. En Watch, revise los valores de this.augmentor y this.counter.
    Watch muestra lo siguiente:
    event.target.value:undefined
    this.augmentor:1
    operand:<not available>
    this.counter:0
    typeof operand:<not available>
    Tanto this.counter como this.augmentor parecen ser números, pero vamos a confirmarlo.
  1. Agregue typeof this.counter y typeof 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"
  1. 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.
  1. 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.

  1. Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos) “”. En la aplicación Solutions, el conteo es 1.
  2. En la aplicación Solutions, haga clic en +1.
  3. 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

  1. Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos) “”. En la aplicación Solutions, el conteo ahora es 2.
  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.En el editor de código, la ejecución se pone en pausa en la primera línea de la función handleAugmentorChange. this.augmentor = event.target.value. Watch muestra event.target.value = 2 (entre comillas).
    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 que event.target.value parece una cadena.
  1. 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.

  1. Haga clic en la ficha Console (Consola).
  2. En la consola, ingrese event.target.value y, luego, presione Intro.Consola con event.target.value agregado
    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.
  1. 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.
  2. Ingrese this.augmentor = 1 y después pulse Intro para volver a cambiarlo a un número.
  3. Introduzca this.augmentor = parseInt(event.target.value) y después pulse Intro. El valor cambia a 2 y permanece un número. Así que ahora sabemos cómo arreglar el código.
  4. Introduzca this.augmentor = 1 para restaurar el valor original.
  5. Regrese al panel Sources (Fuentes).
  6. 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.

  1. Actualice la página en el navegador.
  2. 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.El editor de código muestra el código pausado en la primera línea de la función handleAugmentorChange. Watch muestra que event.target.value todavía es un valor de cadena de 2.
  1. Haga clic en Step over (Pasar por encima) “” para pasar a la siguiente línea.
  2. Verifique el valor de this.augmentor.
    Watch muestra que this.augmentor = número 2, sin comillas.
    Sigue siendo un número. Excelente.
  1. Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos) “”.
  2. En la aplicación Solutions, haga clic en +2.
  3. 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"
  4. 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"
  5. Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos) “”. En la aplicación Solutions, el conteo es 2.
  6. En la aplicación Solutions, haga clic en +2.
  7. 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.
  8. 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

Reto práctico

+500 puntos

Prepararse

Completará esta/este unidad en su propia organización de prácticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organización para seleccionar una diferente.

Su reto

Fix the Display Component
Update the JavaScript for the Display component to fix the unintended concatenation.
  • Fix the Display component:
    • File: display.js
    • Function: handleAugmentorChange(event)
  • Deploy the change to your Trailhead Playground
Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios