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.

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.

  1. En el editor de código de DevTools, busque la función handleIncrement(event).
  2. 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. Editor de código de DevTools con la línea const operand = event.detail; seleccionada
  1. 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. Punto de interrupción resaltado
  1. Haga clic en +1 en la aplicación Solutions (Soluciones). La ejecución del código se detiene en el punto de interrupción. Ventana del navegador con elementos destacados que se corresponden a la descripción siguiente
    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.

Botones de la barra de herramientas Breakpoint control (Control de puntos de interrupción) que se describen en la siguiente tabla

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

  1. 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).
    Al hacer clic con el botón derecho en el número de línea, aparece un menú con cinco elementos: Add breakpoint (Agregar punto de interrupción), Add conditional breakpoint (Agregar punto de interrupción condicional), Add logpoint (Agregar punto de registro), Never pause here (No detener nunca aquí) y Add script to ignore list commands (Agregar script a los comandos de listas de ignorados).
  1. Escriba this.counter > 1 y pulse Intro.
    Aparece this.counter > 1 resaltado
    El punto de interrupción condicional aparece con un puntero naranja y un signo de interrogación (?) para indicar que es condicional.
    Punto de interrupción condicional resaltado
    Desplace el puntero del ratón por this.counter. Su valor es de 0, por lo que no cumple la condición del punto de interrupción condicional.
Nota

Para ver o actualizar un punto de interrupción condicional, haga clic con el botón derecho en el número de línea del punto de interrupción y seleccione Edit breakpoint (Modificar punto de interrupción).

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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? Punto de interrupción condicional resaltado

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.

Pantalla de DevTools que se corresponde con la descripción siguiente

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.

Al hacer clic con el botón derecho en el panel Breakpoints (Puntos de interrupción), aparecen estas opciones adicionales: Reveal location (Ver ubicación), Edit condition (Modificar condición), Enable all breakpoints (Activar todos los puntos de interrupción), Disable all breakpoints (Desactivar todos los puntos de interrupción), Remove breakpoint (Eliminar punto de interrupción), Remove other breakpoints (Eliminar otros puntos de interrupción) y Remove all breakpoints (Eliminar todos los puntos de interrupción).

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.

Los puntos de interrupción de escucha de eventos se agrupan en categorías, por ejemplo, animación, lienzo, portapapeles, control, manipulación de DOM, dispositivo, arrastrar y soltar, geolocalización, teclado, carga, multimedia, ratón y mucho más.

Recursos

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