Utilizar puntos de interrupción
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Ejecutar puntos de interrupción.
- Gestionar puntos de interrupción
Si alguna vez necesitó pausar su código JavaScript en medio del flujo para ver qué estaba pasando, es probable que haya usado el comando debugger
. Después de que resolvió el problema, tuvo que quitar el comando debugger antes de enviar el código a producción. Si bien hay momentos en que el comando debugger
es necesario, existe una mejor forma de hacer que el código se pause. Agregue puntos de interrupción en DevTools mientras ve la página en el navegador. Los puntos de interrupción son más fáciles de definir y no requieren limpieza de código después de usarlos.
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 26:18, en caso de que desee rebobinar y mirar el comienzo del paso nuevamente).
Puntos de interrupción
Los puntos de interrupción permiten pausar JavaScript. Mientras el código está en pausa, puede ver el estado de las variables y las condiciones de su código. Existen varios tipos de puntos de interrupción.
Puntos de interrupción de línea de código
Este tipo de punto de interrupción es ideal cuando desea investigar una sección de código específica. Agreguemos un punto de interrupción que se ponga en pausa antes de que se ejecute una línea de código seleccionada.
Si completó la unidad anterior, ya debería tener display.js abierto en el editor de código. De lo contrario, siga ahora las instrucciones en la sección Localizar los componentes web Lightning de la unidad anterior.
- En el editor de código de DevTools, busque la función
handleIncrement(event)
.
- Haga clic en el número de línea para
const operand = event.detail;
dentro de la función handleIncrement. Un puntero azul resalta el número de línea para indicar que se definió un punto de interrupción en esa línea.
- El punto de interrupción también se muestra en Breakpoints (Puntos de interrupción) en el panel de depuración de JavaScript a la derecha.
- Haga clic en +1 en la aplicación Solutions. La ejecución de código se pone en pausa en el punto de interrupción.
Observe el indicador Paused in debugger (Pausado en depurador) (1). El botón +1 (2) está en estado de clic. La barra de herramientas de control de puntos de interrupción (3) indica Paused on breakpoint (Pausado en punto de interrupción). El ícono de flecha azul indica que el depurador se detuvo en la función handleIncrement. La línea con el punto de interrupción está resaltada (4), lo que muestra dónde se detuvo el depurador en el punto de interrupción.
Navegar por los puntos de interrupción
Ahora que se pausó la ejecución del código, puede avanzar por él una línea a la vez, o bien puede omitir una función, así como entrar o salir de ella. Estas opciones le permiten supervisar el flujo de control y los valores de las propiedades a medida que avanza paso a paso por el código.
El panel de depuración de JavaScript incluye la barra de herramientas de control de puntos de interrupción con botones para trabajar con los puntos de interrupción.
Botón |
Acción |
Descripción |
---|---|---|
Reanudar y poner en pausa la ejecución de la secuencia de comandos |
Permite que el código se ejecute hasta el siguiente punto de interrupción o que termine de ejecutarse si no hay más puntos de interrupción. |
|
Ir paso a paso a la siguiente llamada de función |
Cuando está pausada en una línea de código que contiene una función, Step over next function call (Paso a paso a la siguiente llamada de función) ejecuta todo el código en la función y después se pone en pausa. |
|
Entrar en la siguiente llamada de función |
Cuando está pausada en una línea de código que contiene una función, Step into next function call (Entrar en la siguiente llamada de función) se pone en pausa en la primera línea dentro de la siguiente función. |
|
Salir de la función actual |
Cuando se pone en pausa dentro de una función, Step out of current function (Salir de la función actual) ejecuta el resto del código de la función y luego se pone en pausa. |
|
Pasar |
Ejecuta la línea de código actual y luego se pone en pausa. |
|
Desactivar o activar puntos de interrupción |
Desactiva o activa todos los puntos de interrupción, y los deja en su lugar. |
Puntos de interrupción de línea de código condicionales
Utilice un punto de interrupción de línea de código condicional para pausar solo cuando la condición evalúa a verdadero.
- Haga clic con el botón derecho en el número de línea para
this.counter += operand
(debajo del punto de interrupción que agregó) y seleccione Add conditional breakpoint (Agregar punto de interrupción condicional).
- Introduzca
this.counter > 1
y pulse Intro.
El punto de interrupción condicional se indica con un puntero naranja resaltado con un signo de pregunta (?) para mostrar que es condicional.
Pase el puntero del mouse sobrethis.counter
. Su valor es 0, así que no cumple la condición del punto de interrupción condicional.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. Observe que el código se ejecuta sin detenerse en el punto de interrupción condicional.
- En la aplicación Solutions, haga clic en +1. La ejecución se pone en pausa en el primer punto de interrupción. Ahora el valor de
this.counter
es 1.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. Nuevamente, el código se ejecuta sin detenerse en el punto de interrupción condicional.
- Haga clic en +1. La ejecución se pone en pausa en el primer punto de interrupción. Ahora el valor de
this.counter
es 2, así que el punto de interrupción condicional debe hacer pausar la ejecución del código.
- Haga clic en Resume script execution (Reanudar la ejecución de secuencias de comandos)
. ¿La ejecución de secuencias de comandos se puso en pausa esta vez en el punto de interrupción condicional?
Gestionar los puntos de interrupción
Cuando establece varios puntos de interrupción en distintos archivos, es posible que sea difícil realizar un seguimiento. Ahí es cuando resulta útil la función Breakpoints (Puntos de interrupción), el quinto elemento del panel de depuración de JavaScript. En Breakpoints (Puntos de interrupción), puede deshabilitar o eliminar puntos de interrupción de la línea de código.
Observe el punto de interrupción (1) de la función handleAdd en control.js. También se muestra en Breakpoints (Puntos de interrupción) (2) junto con los puntos de interrupción de display.js.
En Breakpoints (Puntos de interrupción), puede deshabilitar un único punto de interrupción si hace clic en la casilla correspondiente. Haga clic con el botón derecho en cualquier lugar de Breakpoints (Puntos de interrupción) para ver más opciones.
Cuando hay un punto de interrupción sin seleccionar en Breakpoints (Puntos de interrupción), su puntero resaltado en el número de línea de código cambia a un azul más claro, para indicar que el punto de interrupción está inactivo.
Puntos de interrupción del agente de escucha de eventos
Desplácese hacia abajo por el panel de depuración de JavaScript hasta encontrar Event Listener Breakpoints (Puntos de interrupción del agente de escucha de eventos). Aquí puede establecer que los puntos de interrupción se pausen en el código del agente de escucha de eventos que se ejecuta después de que se activa un evento. Hay muchas opciones diferentes para seleccionar. Puede pausar en una categoría completa de eventos o solo en un tipo de evento específico.
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