Skip to main content
Únase a nosotros en TDX, en San Francisco, o en Salesforce+ los días 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse 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

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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

  1. Actualice la página en el navegador. Los puntos de interrupción deben seguir apareciendo.
  2. Si todavía no está abierto, abra el archivo display.js en DevTools.
  3. Busque la función handleAugmentorChange(event).
  4. 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, “”).
  5. Escriba event.target.value y pulse Intro. Se ha agregado event.target.value
    Vemos lo siguiente en Watch (Supervisión): event.target.value:<not available>

Vamos a definir un punto de interrupción y activar el evento.

  1. Haga clic en el número de línea de this.augmentor = event.target.value; para definir un punto de interrupción.
  2. 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". 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).
  1. En el panel de depuración de JavaScript, agregue this.augmentor a Watch (Supervisión). this.augmentor: se ha agregado 1 a Watch (Supervisión)
    Observe que el valor de this.augmentor sigue siendo 1. Esta línea de código aún no se ha ejecutado.
  1. Haga clic en Step over (Pasar, “”) para ejecutar esta línea y pasar a la siguiente. Pantalla de DevTools que se corresponde con la descripción 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"
  1. 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.
    Los botones Controls (Controles) de la aplicación Solutions muestran los valores -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.

  1. 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"
  1. Agregue operand y this.counter en Watch (Supervisión). operand muestra el valor <not available (no disponible)> y this.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
  1. 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.
  2. 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"
  1. 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"
  1. 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.
    El componente Display (Visualización) de la aplicación Solutions muestra un valor en Count (Recuento) de 22.
    ¿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.

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

  1. Actualice la página en el navegador. Los puntos de interrupción y los elementos supervisados deben seguir apareciendo.
  2. En la aplicación Solutions, haga clic en +1.
  3. En Watch (Supervisión), compruebe los valores de this.augmentor y this.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 que this.counter y this.augmentor son números, pero vamos a confirmarlo.
  1. Agregue typeof this.counter y typeof 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"
  1. 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.
  1. 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.

  1. Haga clic en Resume script execution (Reanudar ejecución del script), “”. En la aplicación Solutions, Count (Recuento) tiene un valor de 1.
  2. En la aplicación Solutions (Soluciones), haga clic en +1.
  3. 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

  1. Haga clic en Resume script execution (Reanudar ejecución del script), “”. En la aplicación Solutions, Count (Recuento) ahora tiene un valor de 2.
  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.En Code Editor (Editor de código), se ha detenido la ejecución en la primera línea de la función handleAugmentorChange. this.augmentor = event.target.value. En Watch (Supervisión) event.target.value = 2 (entre comillas).
    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 que event.target.value parece una cadena.
  1. 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.

  1. Haga clic en la ficha Console (Consola).
  2. En la consola, escriba event.target.value y pulse Intro.La consola con event.target.value agregado
    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.
  1. 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.
  2. Escriba this.augmentor = 1 y pulse Intro para volver a cambiar el valor a un número.
  3. Escriba this.augmentor = parseInt(event.target.value) y pulse Intro. El valor cambia a 2 y se queda siendo un número. Ahora ya sabemos cómo arreglar el código.
  4. Escriba this.augmentor = 1 para restaurar el valor original.
  5. Vuelva al panel Sources (Orígenes).
  6. 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.

  1. Actualice la página en el navegador.
  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.En Code Editor (Editor de código) aparece el código en pausa en la primera línea de la función handleAugmentorChange. En Watch (Supervisión) vemos que event.target.value sigue teniendo un valor de cadena de 2.
  1. Haga clic en Step over (Pasar, “”) para pasar a la siguiente línea.
  2. Compruebe el valor de this.augmentor.
    En Watch (Supervisión) vemos lo siguiente: this.augmentor = numeral 2, sin comillas.
    ¡Es un número! Excelente.
  1. Haga clic en Resume script execution (Reanudar ejecución del script), “”.
  2. En la aplicación Solutions (Soluciones), haga clic en +2.
  3. 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"
  4. 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"
  5. Haga clic en Resume script execution (Reanudar ejecución del script), “”. En la aplicación Solutions, Count (Recuento) tiene un valor de 2.
  6. En la aplicación Solutions (Soluciones), haga clic en +2.
  7. 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.
  8. 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

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 otro 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 sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios