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.

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.

  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 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 editor de código de DevTools con la línea const operand = event.detail; seleccionada
  1. 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. Punto de interrupción resaltado
  1. 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. La ventana del navegador con llamadas relacionadas con la siguiente descripció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.

Botones de la barra de herramientas de control de puntos de interrupción descritos en la tabla que sigue

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.

  1. 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).
    Al hacer clic con el botón derecho en el número de línea, se muestran cinco elementos del menú: 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 (Nunca pausar aquí) y Add script to ignore list commands (Agregar secuencia de comandos a los comandos de la lista de elementos ignorados).
  1. Introduzca this.counter > 1 y pulse Intro.
    this.counter > 1 resaltado
    El punto de interrupción condicional se indica con un puntero naranja resaltado con un signo de pregunta (?) para mostrar que es condicional.
    Punto de interrupción condicional resaltado
    Pase el puntero del mouse sobre this.counter. Su valor es 0, así 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 luego seleccione Edit breakpoint (Modificar punto de interrupción).

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

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.

Pantalla DevTools que corresponde a la descripción que sigue

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.

Al hacer clic con el botón derecho en el panel Breakpoints (Puntos de interrupción), se muestran estas opciones adicionales: Reveal location (Detectar ubicación), Edit condition (Modificar condición), Enable all breakpoints (Habilitar todos los puntos de interrupción), Disable all breakpoints (Deshabilitar 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 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.

Los puntos de interrupción del agente de escucha de eventos se agrupan en categorías, que incluyen animación, lienzo, portapapeles, control, manipulación de DOM, dispositivo, arrastrar y soltar, geolocalización, teclado, carga, medios, mouse y mucho más.

Recursos

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