Usar puntos de interrupción
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Ejecutar puntos de interrupción.
- Gestionar los puntos de interrupción.
Si alguna vez ha tenido que poner en pausa un código JavaScript de repente para ver lo que estaba ocurriendo, lo más probable es que haya usado el comando debugger
. Después de resolver el problema, ha tenido que eliminar el comando debugger para enviar el código al entorno de producción. Aunque a veces es necesario usar el comando debugger
, hay una forma mejor de poner el código en pausa. Puede agregar puntos de interrupción en DevTools mientras visualiza la página en el navegador. Los puntos de interrupción son fáciles de definir y no es necesario limpiar el 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 vídeo, parte de la serie Trail Together en Trailhead Live.
(Este vídeo comienza en el minuto 26:18, en caso de que desee rebobinar y volver a ver el principio del paso).
Puntos de interrupción
Los puntos de interrupción le permiten poner en pausa el código JavaScript. Mientras el código está en pausa, puede consultar el estado de variables y las condiciones del código. Hay varios tipos de puntos de interrupción.
Puntos de interrupción de línea de código
Estos puntos de interrupción son ideales para investigar una sección de código concreta. Vamos a agregar un punto de interrupción para detener el código antes de ejecutar una línea de código seleccionada.
Si ha completado la unidad anterior, ya tendrá abierto el archivo display.js en el editor de código. Si no es así, siga las instrucciones de la sección Localizar los componentes web Lightning de la unidad anterior primero.
- En el editor de código de DevTools, busque la función
handleIncrement(event)
.
- Haga clic en el número de línea de
const operand = event.detail;
dentro de la función handleIncrement. El número de línea se destaca con un puntero azul para indicarle que hay un punto de interrupción establecido en esa línea.
- El punto de interrupción también aparece 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 (Soluciones). La ejecución del código se detiene en el punto de interrupción.
Observe el indicador Paused in debugger (En pausa en el depurador) (1). Se ha hecho clic en el botón +1 (2). La barra de herramientas Breakpoint control (Control de puntos de interrupción) (3) indica el valor Paused on breakpoint (En pausa en un punto de interrupción). El icono de flecha azul indica que el depurador se ha detenido en la función handleIncrement. La línea con el punto de interrupción aparece destacada (4), y muestra que el depurador se ha detenido en el punto de interrupción.
Navegar por los puntos de interrupción
Con la ejecución del código en pausa, puede trabajar línea a línea o puede omitir una función, ir a esa función o salir de ella. Estas opciones permiten supervisar el flujo de control y los valores de las propiedades a medida que lee el código.
El panel JavaScript Debugging (Depuración de JavaScript) incluye la barra de herramientas Breakpoint control (Control de puntos de interrupción) con botones para trabajar con los puntos.
Botón |
Acción |
Descripción |
---|---|---|
Resume script execution (Reanudar ejecución del script) y Pause script execution (Poner en pausa la ejecución del script) |
Permite que el código se ejecute hasta el próximo punto de interrupción o deje de ejecutarse si no hay más puntos de interrupción. |
|
Step over next function call (Esquivar la siguiente llamada de función) |
Cuando el código está detenido en una línea que contiene una función, Step over next function call (Ir a la siguiente llamada de función) permite ejecutar todo el código de la función y luego detenerlo. |
|
Step into next function call (Ir a la siguiente llamada de función) |
Cuando el código está detenido en una línea que contiene una función, Step into next function call (Ir a la siguiente llamada de función) permite poner en pausa la primera línea de la función. |
|
Step out of current function (Salir de la función actual) |
Cuando el código está detenido dentro de una función, Step out of current function (Salir de la función actual) permite ejecutar el resto del código de la función y luego detenerlo. |
|
Paso |
Se ejecuta la línea de código actual y luego se detiene. |
|
Deactivate/Activate breakpoints (Desactivar/Activar puntos de interrupción) |
Permite activar o desactivar todos los puntos de interrupción sin mover los puntos de su sitio. |
Puntos de interrupción de línea de código condicionales
Puede usar puntos de interrupción de línea de código condicionales para poner el código en pausa únicamente cuando la evaluación de la condición da como resultado el valor "true".
- Haga clic con el botón derecho en el número de línea de
this.counter += operand
(debajo del punto de interrupción agregado) y seleccione Add conditional breakpoint (Agregar punto de interrupción condicional).
- Escriba
this.counter > 1
y pulse Intro.
El punto de interrupción condicional aparece con un puntero naranja y un signo de interrogación (?) para indicar que es condicional.
Desplace el puntero del ratón porthis.counter
. Su valor es de 0, por lo que no cumple la condición del punto de interrupción condicional.
- Haga clic en Resume script execution (Reanudar ejecución del script),
. Observe que el código se ejecuta sin detenerse en el punto de interrupción condicional.
- En la aplicación Solutions (Soluciones), haga clic en +1. La ejecución se detiene en el primer punto de interrupción. Ahora, el valor de
this.counter
es 1.
- Haga clic en Resume script execution (Reanudar ejecución del script),
. De nuevo, el código se ejecuta sin detenerse en el punto de interrupción condicional.
- Haga clic en +1. La ejecución se detiene en el primer punto de interrupción. Ahora, el valor de
this.counter
es 2, así que el punto de interrupción condicional debería poner en pausa la ejecución del código.
- Haga clic en Resume script execution (Reanudar ejecución del script),
. ¿Se ha puesto en pausa la ejecución del script en el punto de interrupción condicional esta vez?
Gestionar los puntos de interrupción
Cuando define varios puntos de interrupción en distintos archivos, puede ser difícil llevar un control. Por eso, el panel Breakpoints (Puntos de interrupción), el quinto elemento del panel de depuración de JavaScript, resulta tan útil. En Breakpoints (Puntos de interrupción), puede desactivar o eliminar puntos de interrupción de línea de código.
Observe el punto de interrupción (1) en la función handleAdd en control.js. También aparece en Breakpoints (Puntos de interrupción) (2) junto con los puntos de display.js.
En Breakpoints (Puntos de interrupción), puede desactivar un punto de interrupción si hace clic en su casilla de verificación. Haga clic con el botón derecho en cualquier parte de Breakpoints (Puntos de interrupción) para ver más opciones.
Cuando un punto de interrupción no está seleccionado en Breakpoints (Puntos de interrupción), el puntero del número de línea de código cambia a un azul más claro, lo que indica que el punto está inactivo.
Puntos de interrupción de escucha de eventos
Desplácese hacia abajo hasta el panel de depuración de JavaScript para buscar puntos de interrupción de escucha de eventos. Aquí es donde puede establecer puntos de interrupción para detener el código de escucha de eventos que se ejecuta después de activar un evento. Hay muchas opciones entre las que puede elegir. Puede establecer la pausa en una categoría completa de eventos o únicamente en un tipo específico de evento.
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 2)